隐藏表列使用Javascript
我有如下表:隐藏表列使用Javascript
<table id="btt-ranges" cellspacing="0" cellpadding="0" border="0"
<tbody>
<tr>
<th scope="col"> </th>
<th id="Business" scope="col">Type of Business</th>
<th id="Ranges" scope="col"> Ranges</th>
<th scope="col">BTT</th>
</tr>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
<tr>
<td>Example</td>
<td>Example</td>
<td>Example</td>
<td>Example</td>
</tr>
</tbody>
</table>
我所要做的就是隐藏的最后一列,但我不会改变这些表是现在。 我可以使用JavaScript,到目前为止,这是我的尝试:
function show_hide_column() {
var tbl = document.getElementById('btt-changes');
var rows = tbl.getElementsByTagName('tr');
for (var row = 0; row < rows.length; row++) {
var cols = rows[row].children;
console.log(1, cols.length);
if (4 >= 0 && 4 < cols.length) {
var cell = cols[4];
console.log(cell, cell.tagName);
if (cell.tagName == 'TD') cell.style.display = 'none';
}
}
}
我能做些什么,而不触及表?
此选择THES的cols细胞(TH和TD),然后隐藏它们(fiddle):
var lastColHeader = Array.prototype.slice.call(document.querySelectorAll('th:last-child', '#btt-ranges'), 0); // get the header cell
var lastColCells = Array.prototype.slice.call(document.querySelectorAll('td:last-child', '#btt-ranges'), 0).concat(lastColHeader); // get the column cells, and add header
lastColCells.forEach(function(cell) { // iterate and hide
cell.style.display = 'none';
});
哇,这里的工作真的很好 –
感谢您的帮助和耐心,我是新来的:) –
您无需为此使用JavaScript。您可以使用CSS选择器来隐藏最后一栏
#btt-ranges tr td:last-child { display: none; }
编辑:刚刚意识到你特别需要做的是在JavaScript。不知道是否有任何方法可以在不触摸桌子的情况下追加样式。
是的,只有Javascript,但thans您的支持:) –
您的回答对我非常有帮助。很高兴你发布它。 –
您可以使用CSS选择器来选择最后TD喜欢使用 “TD:最后的孩子” –
你可以用布尔值替换一些表达式。例如4> = 0,您可以用true替换。 4是每次更多(或相等)比0. – Misaz