隐藏表中的列及其内容

Hiding columns and its contents in a table

本文关键字：隐藏      更新时间：2023-09-26

我已经创建了一个表，现在我需要通过应用于该列的css（而不是内联）来隐藏表中的特定列。

HTML:

<table id='table1'>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
   <td>5869207</td>
   <td>My first CSS</td>
   <td>$49</td>
  </tr>
</table>

我试过用$($('#table1').find('col:eq(1)')).css('color',red') 给colgroup加背景色和颜色

此代码有效。但是，当我为display : none或overflow:hidden尝试相同的代码时，它不起作用。display:none属性隐藏了该列，但没有隐藏其中td的内容。有人能建议用css隐藏该列及其内容的最佳方法吗。

我需要使用css动态隐藏列，在表有100多行和25列的情况下也是如此。

提前谢谢。

$(document).ready(function(){
     $('td:nth-child(2),th:nth-child(2)').hide();
});

这将隐藏第2列。

我已经通过向td添加类并获得它来解决这个问题。

HTML:

<table id='table1'>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <tr>
    <th class='col1'>ISBN</th>
    <th class='col2'>Title</th>
    <th class='col3'>Price</th>
  </tr>
  <tr>
    <td class='col1'>3476896</td>
    <td class='col2'>My first HTML</td>
    <td class='col3'>$53</td>
  </tr>
  <tr>
   <td class='col1'>5869207</td>
   <td class='col2'>My first CSS</td>
   <td class='col3'>$49</td>
  </tr>
</table>

方式：

$('.col1').css('visibility','hidden');

如果您有候补，请张贴。希望它有用。

相关文章：