I wrote a test page with 4 different methods for hiding the rows.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="/js/jquery/jquery.js"></script>
</head>
<body>
<input type="button" id="jqHideRows" value="Hide rows" />
<input type="button" id="jqHideBody" value="Hide tbody then rows" />
<input type="button" id="cssHideRows" value="CSS rows" />
<input type="button" id="cssHideBody" value="CSS tbody then rows" /
><br />
<input type="button" id="clear" value="reset" />
<table id="test" border="1" width="100%">
<tbody>
</tbody>
</table>
<script type="text/javascript">
<!--
$(function ()
{
var table = $('#test'),
tbody = $('#test > tbody'),
rows;
function jqHideRows ()
{
rows.hide ();
}
function jqHideBody ()
{
tbody.hide ();
rows.hide ();
}
function cssHideRows ()
{
rows.css ('display', 'none');
}
function cssHideBody ()
{
tbody.css ('display', 'none');
rows.css ('display', 'none');
}
function clear ()
{
tbody.show ();
rows.show ();
}
for (var loop = 0; loop < 2000; loop++)
{
tbody.append ('<tr><td>Row ' + (loop + 1) + '</td></tr>');
}
rows = ('tr', tbody);
$('#jqHideRows').click (jqHideRows);
$('#jqHideBody').click (jqHideBody);
$('#cssHideRows').click (cssHideRows);
$('#cssHideBody').click (cssHideBody);
$('#clear').click (clear);
});
-->
</script>
</body>
</html>
Profiling in FireBug said using cssHideRows () was the fastest method.
On Dec 18, 6:28 pm, RickyBerg <bergbra...@gmail.com> wrote:
> I've been converting a legacy web app to use JQuery. I've now cleaned
> it up so that my HTML validates and I have instrumented the code with
> classes and id's as appropriate. This app is essentially a table that
> displays the status of jobs for Autosys.
>
> The problem that I'm having is that when I hide the entire list, the
> browser hangs for several minutes.
>
> There are sometimes over 2000 rows. I have cached the full resultset
> into a variable, though I'm not sure how helpful this is.
>
> In the code below, the initial setting of $allRows doesn't take much
> time at all, but when I hit the hide() line, the browser hangs for
> waaaay too long. interestingly, if I comment out the hide() command,
> and then manually issue a comand like $allRows.css("color", "red"); it
> works in a very reasonable amount of time.
>
> $(function() {
> $allRows = $("tbody>tr");
> $allRows.hide();
>
> }
>
> Also, if I let it run once to completion and all of the rows are
> hidden, then I can show() them and hide() them in reasonable time.
>
> Is it something with my selector?
>
> Thanks, folks.
>
> Eric
