我有一张下列表格:
<table id="mytable" width="500" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th><span>1</th><th><span>2</th><th><span>3</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>1/span></td>
<td><span></span></td>
<td><span>2/span></td>
</tr>
<tr>
<td><span>1</span></td>
<td><span></span></td>
<td><span>2</span></td>
</tr>
<tr>
<td><span>1</span></td>
<td><span></span></td>
<td><span>2</span></td>
</tr>
</tbody>
</table>
我需要做的是 - 隐藏此表格的所有列,表格单元格中包含的<span>
元素为空。我需要完全隐藏单元格,顶部有<th>
元素。在我上面的例子中,它是中间列,但可能有很多,不仅仅是一个。
有人可以就此提出建议吗?
提前致谢。
答案 0 :(得分:9)
这应该有效:
$(document).ready(function() {
hideEmptyCols($("#mytable"));
});
function hideEmptyCols(table) {
//count # of columns
var numCols = $("th", table).length;
for ( var i=1; i<=numCols; i++ ) {
var empty = true;
//grab all the <td>'s of the column at i
$("td:nth-child(" + i + ")", table).each(function(index, el) {
//check if the <span> of this <td> is empty
if ( $("span", el).text() != "" ) {
empty = false;
return false; //break out of each() early
}
});
if ( empty ) {
$("td:nth-child(" + i + ")", table).hide(); //hide <td>'s
$("th:nth-child(" + i + ")", table).hide(); //hide header <th>
}
}
}
或(更简单):
function hideEmptyCols(table) {
var rows = $("tr", table).length-1;
var numCols = $("th", table).length;
for ( var i=1; i<=numCols; i++ ) {
if ( $("span:empty", $("td:nth-child(" + i + ")", table)).length == rows ) {
$("td:nth-child(" + i + ")", table).hide(); //hide <td>'s
$("th:nth-child(" + i + ")", table).hide(); //hide header <th>
}
}
}
答案 1 :(得分:1)
我创建的版本可能比在jQuery中使用很多CSS3选择器好一点。
$(function () {
var $table = $('#mytable'),
$thead = $table.find('thead'),
$tbody = $table.find('tbody');
var isEmpty = {};
$tbody.find('td').each(function () {
var $this = $(this);
if ( $this.text() == '' && isEmpty[ $this.index() ] != false ) {
isEmpty[ $this.index() ] = true;
} else {
isEmpty[ $this.index() ] = false;
}
});
for (var x in isEmpty) {
if ( isEmpty[x] ) {
$thead.find('th').eq( x ).remove();
$tbody.find('td:nth-child(' + (parseInt(x, 10) + 1) + ')').remove();
}
}
});
答案 2 :(得分:0)
我建议为每个th和td添加一个类(类似&#34; col_1&#34;,&#34; col_2&#34;等)并使用$("td").children("span:empty")
查找应该是的列隐藏。