使用 jquery 隐藏表的列/td
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3296495/
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
hide column/td of the table by using jquery
提问by dave
How can we hide the column of the table by using jquery
我们如何使用jquery隐藏表的列
< table >
< tr >
< td id="td_1" >name</ td >
< td id="td_2" >title</ td >
< td id="td_3" >desc</ td >
</ tr >
< tr >
< td id="td_1" >Dave</ td >
< td id="td_2" >WEB DEV</ td >
< td id="td_3" >Blah Blah</ td >
< /tr >
< tr >
< td id="td_1" >Nick< /td >
< td id="td_2" >SEO< /td >
< td id="td_3" >Blah Blah and blah< /td >
< /tr >
< /table >
So suppose if someone want to hide first column i.e. td_1 from all rows, then what will be the code ?
所以假设如果有人想从所有行中隐藏第一列，即 td_1，那么代码是什么？
Thanks in Advance Dave
提前致谢戴夫
回答by Marko
$(document).ready(function() {
$("#td_1").hide();
});
But ideally, you want to use a class instead of an ID.
但理想情况下，您希望使用类而不是 ID。
so
所以
<table>
<tr>
<td class="td_1">name</td>
<td class="td_2">title</td>
<td class="td_3">desc</td>
</tr>
<tr>
<td class="td_1">Dave</td>
<td class="td_2">WEB DEV</td>
<td class="td_3">Blah Blah</td>
</tr>
<tr>
<td class="td_1">Nick</td>
<td class="td_2">SEO</td>
<td class="td_3">Blah Blah and blah</td>
</tr>
</table>
And then you would use similar code:
然后你会使用类似的代码：
$(document).ready(function() {
$(".td_1").hide()
});
So the only thing that changed is the hash(#) to a dot(.). Hash is for ID's, Dot is for classes.
所以唯一改变的是哈希（#）到点（.）。哈希用于 ID，点用于类。
Yet another way would be to use the nthChildselector.
另一种方法是使用nthChild选择器。
$(document).ready(function() {
$('tr td:nth-child(1)').hide();
});
Where 1 is the column number to be hidden.
其中 1 是要隐藏的列号。
HTH
HTH
回答by Hien Nguyen
Some case, user use thfor table header, you can use this script for hide column with th.
在某些情况下，用户th用于表头，您可以使用此脚本隐藏带有th.
$('#test').click(function() {
$('th:nth-child(2), tr td:nth-child(2)').hide();
})
$('#test').click(function() {
$('th:nth-child(2), tr td:nth-child(2)').hide();
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border=1>
<tr>
<th id="td_1">name</th>
<th id="td_2">title</th>
<th id="td_3">desc</th>
</tr>
<tr>
<td id="td_1">Dave</td>
<td id="td_2">WEB DEV</td>
<td id="td_3">Blah Blah</td>
</tr>
<tr>
<td id="td_1">Nick</td>
<td id="td_2">SEO</td>
<td id="td_3">Blah Blah and blah</td>
</tr>
</table>
<button id='test'>Hide title</button>