JS/jQueryでtableの特定のクラス名がついた行のみ表示する際の高速化

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

解決

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

_x000D_

_x000D_

var table = $('table');_x000D_
var row = ('<tr><td>aaa</td><td>bbb</td></tr>');_x000D_
var row_active = ('<tr class="active"><td>aaa</td><td>bbb</td></tr>');_x000D_
_x000D_
var src = "";_x000D_
for(var i = 0; i < 10000; ++i)_x000D_
	src += (i % 2 ? row : row_active);_x000D_
table.html(src);_x000D_
_x000D_
$('div')_x000D_
.append($('<button>').text('reset').click(function(){_x000D_
	$('table').removeClass('filter');_x000D_
  $('table tr').each(function(){this.style.display=null;});_x000D_
}))_x000D_
.append($('<button>').text('hide/show').click(function(){_x000D_
  $('table tr').hide();_x000D_
  $('table tr[class="active"]').show();_x000D_
}))_x000D_
.append($('<button>').text('non jQuery').click(function(){_x000D_
	$('table tr').each(function() {_x000D_
  	this.style.display = $(this).hasClass("active") ? null : "none";_x000D_
  });_x000D_
}))_x000D_
.append($('<button>').text('addClass').click(function(){_x000D_
  $('table').addClass('filter');_x000D_
}));

_x000D_

body { font-size: 10px; }_x000D_
.active { color: red }_x000D_
.filter tr:not(.active) { display: none }

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>_x000D_
<div></div><table></table>

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *