删除/隐藏表格的空列，包括<th>

如何隐藏该列中的所有空单元格，包括该列中的标题<th>，同时保留其他列及其标题原样。以下jquery隐藏整个<th>，这是不是我想要的。 Here是一个示例，我只想隐藏整个“Column3”，其中包括<th>。提前谢谢了。删除/隐藏表格的空列，包括<th>

$('table#mytable tr').each(function() { 
    if ($(this).children('td:empty').length === $(this).children('td').length) { 
     $(this).hide(); 
    } 
});

来源

2011-03-02 DGT

该代码隐藏表行而不是列，因为'$（this）'将获得每个'tr'的值。 – Dan 2011-03-02 19:39:49

您是否想隐藏所有空单元格的列或一个或多个空单元格？ – 2011-03-02 19:40:06

我想隐藏包含列中标题的所有空单元格的列，而保留其他列标题原样。谢谢。 – DGT 2011-03-02 19:50:43

花了一段时间拼凑起来。感谢nxt的一些代码。

$('#mytable th').each(function(i) { 
    var remove = 0; 

    var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')') 
    tds.each(function(j) { if (this.innerHTML == '') remove++; }); 

    if (remove == ($('#mytable tr').length - 1)) { 
     $(this).hide(); 
     tds.hide(); 
    } 
});

来源

2011-03-02 19:38:46

如果标题包含内容（标题）但不包含任何内容，则不会删除标题。我仍然在努力。 – 2011-03-02 19:43:21

确切地说，它不隐藏标题，这是我想要隐藏的，而保留其他标题。谢谢。 – DGT 2011-03-02 19:46:59

好的，更新和测试。 http://jsfiddle.net/DRFBG – 2011-03-02 20:31:24

如果你想隐藏，如果所有细胞（忽略头）是空的，你可以不喜欢列：

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

样品：http://jsfiddle.net/DeQHs/

样品2（适合jQuery> 1.7）：http://jsfiddle.net/mkginfo/mhgtmc05/

来源

2011-03-02 20:07:07 nxt

非常感谢。这很好。 – DGT 2011-03-02 20:09:35

这不起作用：http：// jsfiddle。网/ DeQHs/1/ – 2011-03-02 20:14:12

二。如果只有一个字段为空，而不是全部，则它会清除列。 – 2011-03-02 20:15:41

您需要下一个编码：

HTML

<table id="mytable" border="1"> 
    <thead> 
     <tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4</th></tr> 
    </thead> 
    <tbody> 
     <tr class="data"><td>1st</td><td>1.1</td><td></td><td>1</td></tr> 
     <tr class="data"><td>2nd</td><td>2.01</td><td></td><td>2</td></tr> 
     <tr class="data"><td>3rd</td><td>3.001</td><td></td><td>3</td></tr> 
     <tr class="data"><td>4th</td><td>4.01</td><td></td><td>4</td></tr> 
    </tbody> 
</table>

的JavaScript

var $table = $('#mytable'); 
var thead = $table[0].tHead, tbody = $table[0].tBodies[0]; 
var colsLen = tbody.rows[0].cells.length, rowsLen = tbody.rows.length; 
var hideNode = function(node) { if (node) node.style.display = "none"; }; 
for (var j = 0; j < colsLen; ++j) { 
    var counter = 0; 
    for (var i = 0; i < rowsLen; ++i) { 
     if (tbody.rows[i].cells[j].childNodes.length == 0) ++counter; 
    } 
    if (counter == rowsLen) { 
     for (var i = 0; i < rowsLen; ++i) { 
      hideNode(tbody.rows[i].cells[j]); 
     } 
     hideNode(thead.rows[0].cells[j]); 
    } 
}

来源

2011-03-02 20:12:28

http://jsfiddle.net/nlovatt/JsLn8/

避免了使用表ID在选择

来源

2012-05-29 14:50:46 codefinger

无解的，我在这里工作多表的例子。这是我用来隐藏空列带或不带标头中的文本：

$('table').each(function(a, tbl) { 
     var currentTableRows = $(tbl).find('tbody tr').length; 
     $(tbl).find('th').each(function(i) { 
      var remove = 0; 
      var currentTable = $(this).parents('table'); 

      var tds = currentTable.find('tr td:nth-child(' + (i + 1) + ')'); 
      tds.each(function(j) { if ($(this).text().trim() === '') remove++; }); 

      if (remove == currentTableRows) { 
       $(this).hide(); 
       tds.hide(); 
      } 
     }); 
    });

来源

2014-01-23 16:54:12 nmat

如果表中的数据是从MySQL查询可以验证，如果一列是通过使用字段计数空（ count = 0意味着没有值）。

当你有很多字段时，它是相当挑剔的，并且相应的页眉和页脚单元也需要IF条件。但它的作品...

if ($sum_field>'0') echo "<th>field</th>"; 
if ($sum_field>'0') echo "<td>" . $row['field'] . "</td>";

@nmat解决方案工作正常，但不处理页脚。

来源

2014-03-10 21:51:28 Guppy

删除/隐藏表格的空列，包括<th>

回答

相关问题