All geek questions in one place

How can I add .attr ('colspan', '100') dynamically if there is only one visible table cell per row?

As the name implies, I would like to dynamically add colspan="100"to any single cell in a table row using jquery.

I use the wordpress plugin to add a table to the page, but this does not allow the use of colspan, so I hide all empty cells with jquery. The problem occurs when a row uses only one cell. I would like it to cover 100%.

I need to be able to count every visible cell in each row, and if there is only one, add .attr('colspan', '100')to this cell so that it fills the row.

Any ideas? Thanks

This is what I generate using Wordpress.

$(document).ready(function() {
  $('.curriculum table tr').each(function() {

    $('td').each(function() {
      var cellText = $.trim($(this).text());
      var $cellExp = $(this).closest('td').prev();

      if (cellText.length == 0) {
        $(this).hide();
        $cellExp.attr('colspan', '2');
      }
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="curriculum">
  <table class="table  table-responsive">
    <tbody>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>
Run codeHide result
+4
3

colspan = 100 . td, , colspan . , 1 , .

$(document).ready(function() {
var maxTdCount = 0;
  $('.curriculum table tr').each(function() {
    $('td').each(function() {
      var cellText = $.trim($(this).text());

      if (cellText.length == 0) {
        $(this).hide();
      }
    });
    if($(this).find("td:visible").length > maxTdCount)
    {    maxTdCount = $(this).find("td").length;}
  });
  $('.curriculum table tr').each(function() {
  if($(this).find("td:visible").length == 1)
    {
    	$(this).find("td").attr("colspan", maxTdCount);
    }
    });
});
td{border:1px solid black}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="curriculum">
<table>
  <tbody>
    <tr>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
</tr>
<tr>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td></td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
</tr>
<tr>
  <td></td>
  <td></td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td></td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td></td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td></td>
</tr>
<tr>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td></td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
  <td></td>
    </tr>
   </tbody>
 </table>
</div>
Hide result
+1

.

    $(document).ready(function () {
        $('.curriculum table tr').each(function () {
           $('td').each(function () {
            var cellText = $.trim($(this).text());

            if (cellText.length == 0) {
                $(this).remove();
            }
           });
          if ($(this).children("td").length == 1) {
            $(this).children("td").attr("colspan", "100")
        }
        });
    });

Codepen

+3

I would start with all cells followed by an empty cell, and then delete all subsequent empty cells by adding colspan (comments in code):

$('td').filter(function() {
  return $(this).next().text().trim() === ''; // get all tds that have an empty cell after them
}).each(function() {
  var $original = $(this); // get the original cell

  if (!$original.hasClass('remove')) { // check if the cell has already been marked for removal
    var counter = 1,
      $item = $original;

    do {
      if ($item.next().text().trim() === '') {
        // next cell is empty, increment colspan and reset do...while for next cell
        counter++;
        $item = $item.next().addClass('remove');
      }
    } while ($item.next().length && $item.next().text().trim() === '');

    $original.attr('colspan', counter); // set the colspan on the first cell
  }
});

$('.remove').remove();

// merge any previous empty cells
$('td').filter(function() {
  $prev = $(this).prev();
  return $prev.length && $prev.text().trim() === ''; // get all tds that have an empty cell before them - should only be ones that start the row
}).each(function() {
  var $original = $(this),
    $prev = $original.prev();
 
  var colspan = getColspan($original) + getColspan($prev); 
  $original.attr('colspan', colspan);
  $prev.remove();
});

function getColspan($elem) {
  var attr = $elem.attr('colspan');

  if (typeof attr !== typeof undefined && attr !== false) {
    return parseInt(attr);
  }

  return 1;
}
td {
  vertical-align: top;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="curriculum">
  <table class="table  table-responsive">
    <tbody>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
      </tr>
      <tr>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>
Run codeHide result
+1
source

Source: https://habr.com/ru/post/1695205/

More articles:


All Articles