Question

我创建了一个表，现在我需要通过应用于列的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>

我尝试通过colgroup

向$($('#table1').find('col:eq(1)')).css('color',red')提供背景颜色和颜色

此代码有效。但是，当我为display : none或overflow:hidden尝试相同的代码时，它不起作用。隐藏列但不隐藏display:none内容的td属性。任何人都可以建议一个最好的方法来隐藏列，其内容由CSS。

我需要使用css动态隐藏列，并且在表中有超过100行和25列的情况下。

提前致谢。

Answer 1

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

这隐藏了第二栏。

Answer 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');

如果您有替补，请发布。希望它会有用。

将列及其内容隐藏在表中

2 个答案: