Question

我正在使用以下代码：这是html表：

    <table id="preTbl">
       <tr>
         <th>Type</th>
         <th>Origin</th>
         <th>Count</th>
         <th>Age Range</th>
         <th>Gender</th>
      </tr>
      <tr ng-repeat="row in returnData" class="centered">
           <td>{{ row.TypeName }}</td>
           <td>{{ row.Origin }}</td>
           <td>{{ row.Count }}</td>
           <td>{{ row.ageRange}}</td>
           <td>{{ row.gender}}</td>
      </tr>
   </table>

我的JS功能，用户点击搜索：

$("#preTbl th:nth-child(4)").hide();
$("#preTbl td:nth-child(4)").hide();

th隐藏得很好，但td不会隐藏。

Answer 1

<强> APIThrottleHandler

：nth-child（n）伪类很容易与：eq（n）混淆，即使这两者可能导致显着不同的匹配元素。使用：nth-child（n）时，无论它们是什么，都会对所有子项进行计数，并且只有在与附加到伪类的选择器匹配时才选择指定的元素。使用：eq（n）时，只计算附加到伪类的选择器，不限于任何其他元素的子元素，以及第（n + 1）个元素（n基于0）被选中。

您可能需要使用:eq()或.eq()代替：

$("#preTbl th:eq(2), #preTbl td:eq(2)").hide();

希望这有帮助。

＆＃13;

$("#preTbl th:eq(2), #preTbl td:eq(2)").hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table style="width:100%" id='preTbl'>
  <tr>
    <th>Column 0</th>
    <th>Column 1</th> 
    <th>Column 2</th>
  </tr>
  <tr>
    <td>Column 0 content</td>
    <td>Column 1 content</td> 
    <td>Column 2 content</td>
  </tr>
</table>

＆＃13;

Answer 2

我发现应用了很多样式的b / c，因为这是一个很大的应用程序，我不得不依赖使用ng-hide。你可以看到从这里读取它必须手动覆盖，因为它使用！important，但在我的情况下它帮助完成了工作。

angularjs ng-hide information

谢谢，我希望这有助于将来的人们！

JQuery隐藏功能适用于但不适用于td

2 个答案: