javascript 删除/隐藏表的空列，包括 <th>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5172454/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
remove/hide table's empty column(s), including <th>
提问by DGT
How can I hide the column with all empty cells including the title <th>in that column, while leaving the other columns and their titles as it is. Following jquery hides the entire <th>, which is not I want. Hereis a sample, where I want to hide only the entire 'Column3' including <th>. Many thanks in advance.
如何隐藏包含所有空单元格的列，包括该<th>列中的标题，同时保留其他列及其标题。跟随 jquery 隐藏了整个<th>，这不是我想要的。这是一个示例，我只想隐藏整个“Column3”，包括<th>. 提前谢谢了。
$('table#mytable tr').each(function() {
if ($(this).children('td:empty').length === $(this).children('td').length) {
$(this).hide();
}
});
回答by Stephen Walcher
Took a while to piece together. Thanks to nxt for some of the code.
花了一段时间才拼凑起来。感谢 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();
}
});
回答by nxt
If you want to hide the column if all cells (ignoring the header) are empty, you could do something like:
如果您想在所有单元格（忽略标题）为空时隐藏该列，您可以执行以下操作：
$('#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();
}
});
Sample: http://jsfiddle.net/DeQHs/
示例：http: //jsfiddle.net/DeQHs/
Sample 2 (adapted for jQuery > 1.7): http://jsfiddle.net/mkginfo/mhgtmc05/
示例 2（适用于 jQuery > 1.7）：http: //jsfiddle.net/mkginfo/mhgtmc05/
回答by nmat
None of the solutions here worked for me. This was what I used to hide empty columns with or without a text in the header:
这里没有一个解决方案对我有用。这是我用来隐藏标题中带有或不带有文本的空列的方法：
$('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();
}
});
});
回答by codefinger
http://jsfiddle.net/nlovatt/JsLn8/
http://jsfiddle.net/nlovatt/JsLn8/
A multi-table example which avoids using the table id in the selectors
避免在选择器中使用表 ID 的多表示例
回答by artyom.stv
You need the next code:
您需要下一个代码：
HTML
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
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]);
}
}
回答by Guppy
If the table data are from a MySQL query it possible to verify if a column is empty by using count on the field (count = 0 means that there are no values).
如果表数据来自 MySQL 查询，则可以通过在字段上使用计数来验证列是否为空（计数 = 0 表示没有值）。
It is quite fastidious when you have many fields, and the IF condition is needed for the corresponding header and footer cells too. But it works...
当你有很多字段时，这是非常挑剔的，并且相应的页眉和页脚单元格也需要IF条件。但它有效...
if ($sum_field>'0') echo "<th>field</th>";
if ($sum_field>'0') echo "<td>" . $row['field'] . "</td>";
@nmat solution works fine but doesn't handle footers.
@nmat 解决方案工作正常，但不处理页脚。
