javascript - 如何删除表格中的空列

Question

JQUERY 中是否有任何函数可以删除表中的空列。我附上了示例屏幕截图以便清楚地理解。

由于 MID 表中也包含合并单元格。

我已经尝试过这个片段，由于某种原因，浏览器只是继续显示加载并且浏览器挂起。

var $theTable = $("table#myTable"),
    lookAt    = ["tr:first-child", "tr:last-child", 
                 "td:first-child", "td:last-child"];

for (var i=0; i<lookAt.length; i++) {
  while ( $.trim($(lookAt[i], $theTable).text()) == "" ) {
    $(lookAt[i], $theTable).remove();
  }
}

Answer 1

尝试

var $table = $('table');

var $frow = $table.find('tr').first();

$frow.find('td').each(function(idx, td){
    var cols = $table.find('tr').not($frow).find('td:eq(' + idx + ')');
    var emptycells = cols.filter(function(idx, el){
        return $(el).is(':empty');
    });

    if(cols.length == emptycells.length){
        $table.find('tr').find('td:eq(' + idx + ')').remove()
    }
})

演示：小提琴

Answer 2

I guess that there isn't any jquery function that removes the empty colums, but you can create one using the code bellow:

$('#test tr th').each(function(i) {
    //select all tds in this column
    var tds = $(this).parents('table')
         .find('tr td:nth-child(' + (i + 1) + ')');
    if(tds.is(':empty')) {
        //hide header
        // $(this).remove();
        $(this).hide();
        //hide cells
        //tds.remove();
        tds.hide();
    } 
});

JSFIDDLE

Tip: Using hide() instead of remove() increase the speed of operations because appending and removing elements from HTML are operations which require more memory.

Answer 3

你可以试试下面的一个，

<table border="1">
    <tr>
        <td>col1</td>
        <td></td>
        <td>col3</td>
    </tr>
    <tr>
        <td>col1</td>
        <td></td>
        <td>col3</td>
    </tr>
</table>

jQuery：

 $('table tr td').each(function (i) {
     alert("To show difference");
     //select all tds in this column
     var tds = $(this).parents('table')
         .find('tr td:nth-child(' + (i + 1) + ')');
     if (tds.is(':empty')) {
         $(this).remove();
         tds.remove();
     }
 });

Answer 4

您可以从 jQuery中使用 , remove() 。但是您应该在 td 或 tr 上放置任何 id

Answer 5

只是为了提供其他选择：

$('td:empty').each(function(i){
 $(this).hide().parents('table').find('th:nth-child('+(i+1)+')').hide();
});