JS/jQueryでtableの特定のクラス名がついた行のみ表示する際の高速化
<table>
<tr>
<td>セル</td>
<td>セル</td>
...
</tr>
<tr class="active">
<td>セル</td>
<td>セル</td>
...
</tr>
<tr>
<td>セル</td>
<td>セル</td>
...
</tr>
...
</table>
このようなHTML構造のテーブルがあります。tr
要素に class="active"
がついている行のみ表示したいとき、愚直にやると以下のようなコードになると思います。
// 一旦全部非表示
$('table tr').hide();
// activeがついているtr要素のみ表示
$('table tr[class="active"]').show();
これが少ない行数のtableならパッと表示されるのですが、10000行を超えるテーブルになると動作がもっさりしてしまいます。少しでも高速化する方法はあるでしょうか?