Question

我有一个包含很多行的表，理想情况下我希望用特定的类显示row（tr）并隐藏所有其他的tr。所有tr都分配了唯一的类。

我在CSS

中使用下面的内容尝试过它

.displayNone{
    display:none;
}

.displayBlock{
    display:block;
}

然后从js添加和删除类但不起作用。

Js Fiddle：https://jsfiddle.net/SujitJ/wz82w4m3/1/

它也应该是平稳过渡。请帮忙！

Answer 1

请试一试。

＆＃13;

$('#1').click(function() {
    $('.111A').hide();
}); 

$('#2').click(function() {
    $('.111A').show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableContent">
  <thead>
    <tr>
      <th class="col1">RoleName</th>
      <th class="col2">ReadOnly</th>
      <th class="col3">Modify</th>		
      <th class="col4">Approve</th>
    </tr>
  </thead>
  <tbody>	
    <tr class="111A">
      <td>Policy</td>
      <td>true</td>
      <td>false</td>
      <td>false</td>						
    </tr>
    <tr class="222A">
      <td>Policy</td>
      <td>true</td>
      <td>false</td>
      <td>false</td>						
    </tr>	
  </tbody>
</table>

<button id="1">addNone</button>
<button id="2">addBlock</button>

＆＃13;

Answer 2

使用.hide（）,. show（）获取信息：w3schools

$('#1').click(function() {
  $('.111A').hide();
}); 

$('#2').click(function() {
  $('.111A').show();
});

Answer 3

这里有几点要说：

在您的JSFiddle中，您还没有包含jQuery的链接，因此它不会识别美元符号（因为它不是本机javascript的一部分）。如果你确实包含它，它会正确隐藏第一行，但是如果你试图显示它，它就不能很好地工作。这是因为您尝试将(None, 258, 258, 1)提供给display: block;元素，使其行为不像表格行。

解决方法是仅使用.displayNone CSS类，如下所示：https://jsfiddle.net/wz82w4m3/3/

编辑：

为了实现平滑过渡＆＃34;，正如您所提到的，您可以使用jQuery <tr>和.hide()方法，因为您传递的整数是毫秒数动画运行，如下所示：https://jsfiddle.net/wz82w4m3/4/

Answer 4

这个小提琴正在运行，但您需要将jQuery库添加到javascript配置中。此外，您可以简单地使用$('.11A').fadeIn()和$('.11A').fadeOut()等jQuery方法进行平滑淡化。

Answer 5

您的代码是正确的，仅当您使用处理“click”事件的“jquery.min.js”文件时才会起作用。

使用jQuery隐藏/显示表的行

5 个答案: