使用jQuery隐藏表格的列/单元格

Question

使用jQuery隐藏表格的列/单元格

11

如何使用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 >

如果有人想要隐藏所有行中的第一列（即td_1），那么应该写什么代码呢？

预先感谢 Dave

- dave

不需要id的花哨操作... $('tr td:nth-child(n)')，其中n是列号。 - pxl

另外，如果我们帮助您解决了问题，请接受一个答案。 - Marko

3个回答

1

有些情况下，用户会使用th作为表头，您可以使用此脚本隐藏带有th的列。"Original Answer"翻译成"最初的回答"。

$('#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>

- Hien Nguyen

0

http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html

- Shawn D.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marko · Accepted Answer

$(document).ready(function() {
    $("#td_1").hide();
});

理想情况下，您应该使用类而不是ID。

所以。

<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>

然后您将使用类似的代码：

$(document).ready(function() {
    $(".td_1").hide()
});

唯一改变的是#号变成了点. #代表ID，点代表class。

另一种方法是使用nthChild选择器。

$(document).ready(function() {
    $('tr td:nth-child(1)').hide();
});

1表示要隐藏的列号。

希望对你有所帮助。