Question

如何使用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，那么代码是什么？

先谢谢戴夫

Answer 1

$(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()
}

所以唯一改变的是哈希（＃）到点（。）。 Hash用于ID，Dot用于类。

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

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

其中1是要隐藏的列号。

HTH

Answer 2

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

Answer 3

在某些情况下，用户将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>

使用jquery隐藏表的列/ td

3 个答案: