使用jQuery隱藏/顯示表格行

Question

我有一個包含許多行的表，理想情況下，我想顯示具有特定類的行（tr），並隱藏所有其他tr。 所有tr都分配有唯一的類。

我已經在CSS中使用以下方法嘗試過

.displayNone{
    display:none;
}

.displayBlock{
    display:block;
}

然后從js添加和刪除類，但不起作用。

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

同樣，它應該是一個平穩的過渡。 請幫忙！

Answer 1

請嘗試這個。

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

 <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> 

Answer 2

使用.hide（）、. show（）獲取信息： w3schools

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

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

Answer 3

這里有幾件事要說：

在您的JSFiddle中，您沒有包括jQuery的鏈接，因此它無法識別美元符號（因為它不是本機javascript的一部分）。 如果包含它，它會正確隱藏第一行，但是如果您嘗試顯示它，它就不能很好地工作。 發生這種情況是因為您嘗試給出display: block; 到<tr>元素，使其行為不像表行。

解決方案是僅使用您的.displayNone CSS類，如下所示： https ://jsfiddle.net/wz82w4m3/3/

編輯：

為了使“平穩過渡”，正如你所說，你可以使用jQuery的.hide()和.show()方法，考慮到你傳遞整數是動畫運行，如下所示的毫秒數： HTTPS ：//jsfiddle.net/wz82w4m3/4/

Answer 4

那個小提琴正在工作，但是您需要將jQuery庫添加到javascript配置中。 您也可以簡單地使用jQuery方法，例如$('.11A').fadeIn()和$('.11A').fadeOut()來平滑淡入淡出。

Answer 5

您的代碼是正確的，並且僅在使用處理“ click”事件的“ jquery.min.js”文件時才有效。