How can I add .attr('colspan', '100') dynamically if only one visible table cell in a row?
Here is a script.
$(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") } }); });
Using colspan = 100 is not a good solution at first. Counting max td count then using it as colspan may be a better idea. If you don't want to hide other cells when there is more then 1 visible cell in a row, you can easly modify this code to achieve it.
$(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>
I would start from all cells that are followed by an empty cell and then remove any empty cells that follow, whilst adding the 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>