jQueryを使用してテーブルの行を非表示/表示する

私は多くの行を持つテーブルを持っています。理想的には、特定のクラスで行（tr）を表示し、すべてのtrには一意のクラスが割り当てられています。私はCSSjQueryを使用してテーブルの行を非表示/表示する

に以下のクラスの追加や削除のjsから、その後

.displayNone{ 
    display:none; 
} 

.displayBlock{ 
    display:block; 
}

を使用して、それを試してみましたが、動作しません

。

Jsのフィドル：https://jsfiddle.net/SujitJ/wz82w4m3/1/

また、それがスムーズに移行する必要があります。助けてください！

出典

2017-09-20 Sujit Jadhav

あなたはあなたのフィーリンの例でjqueryを追加していません –

これを試してください。

$('#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> \t \t 
 
     <th class="col4">Approve</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> \t 
 
    <tr class="111A"> 
 
     <td>Policy</td> 
 
     <td>true</td> 
 
     <td>false</td> 
 
     <td>false</td> \t \t \t \t \t \t 
 
    </tr> 
 
    <tr class="222A"> 
 
     <td>Policy</td> 
 
     <td>true</td> 
 
     <td>false</td> 
 
     <td>false</td> \t \t \t \t \t \t 
 
    </tr> \t 
 
    </tbody> 
 
</table> 
 

 
<button id="1">addNone</button> 
 
<button id="2">addBlock</button>

出典

2017-09-20 10:57:32

情報について.hide（）、.SHOW（）使用：w3schools

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

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

出典

2017-09-20 11:00:22 Aymen

あり、ここで言いたいことがいくつかのこと：

あなたJSFiddleであなたはjQueryへのリンクを含んでいないので、ドル記号を認識しません（それはネイティブJavaScriptの一部ではありません）。これを含めると、最初の行が正しく表示されなくなりますが、表示しようとするとうまく動作しません。これは、display: block;を<tr>要素に指定しようとしたために発生し、テーブル行のように動作しません。ここに示されているよう

これを解決するには、唯一のあなたの.displayNoneのCSSクラスを使用することです：https://jsfiddle.net/wz82w4m3/3/

EDIT：

は、あなたが述べたように、あなたが使用することができ、それは「円滑な移行」を作るためにjQueryの.hide()と.show()方法、ここに示したように、あなたが渡す整数は、アニメーションを実行することをミリ秒数であることを考慮：https://jsfiddle.net/wz82w4m3/4/

出典

2017-09-20 11:00:54

フィドルが動作しているが、あなたはjavascriptの設定にjQueryライブラリを追加する必要があります。また、滑らかなフェードのために、$('.11A').fadeIn()と$('.11A').fadeOut()のようなjQueryメソッドを簡単に使用できます。

出典

2017-09-20 11:01:06 pablopunk