0
<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行を超えるテーブルになると動作がもっさりしてしまいます。少しでも高速化する方法はあるでしょうか?

2 件の回答 2

1

CSSで実現すると高速だと思われます。active ではない tr を不可視にすれば良いです。

動的に可視状態を切り替えるサンプルを作りました。

document.querySelector('button').addEventListener('click', function() {
  document.querySelector('.targettable').classList.add('showactiveonly');
});
.targettable .active {
  background: lime;
}

.targettable.showactiveonly tr:not(.active) {
  display: none;
}
<button>アクティブ行のみ表示</button>
<table class="targettable">
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr class="active"><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
<tr><td>cell<td>cell<td>cell</tr>
</table>

0

まあCSSでやるのが速いのは言うまでもないですが、show() を使わないだけでも相当速くなるようです。

var table = $('table');
var row = ('<tr><td>aaa</td><td>bbb</td></tr>');
var row_active = ('<tr class="active"><td>aaa</td><td>bbb</td></tr>');

var src = "";
for(var i = 0; i < 10000; ++i)
	src += (i % 2 ? row : row_active);
table.html(src);

$('div')
.append($('<button>').text('reset').click(function(){
	$('table').removeClass('filter');
  $('table tr').each(function(){this.style.display=null;});
}))
.append($('<button>').text('hide/show').click(function(){
  $('table tr').hide();
  $('table tr[class="active"]').show();
}))
.append($('<button>').text('non jQuery').click(function(){
	$('table tr').each(function() {
  	this.style.display = $(this).hasClass("active") ? null : "none";
  });
}))
.append($('<button>').text('addClass').click(function(){
  $('table').addClass('filter');
}));
body { font-size: 10px; }
.active { color: red }
.filter tr:not(.active) { display: none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div></div><table></table>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。