[jQuery] 1.3.1 Bogs down on table parsing
I have a table that I am parsing with jQuery. The table is used to
show data related to various objects. It alternates between a row with
applicable data, and a hidden row that contains other details. The
main body of the table is built with multiple html blocks like so:
<tr class="text3" valign="top" id="row01">
<td id="arrow-row01"><div><img src="/d-elearn/intranet/inv2/themes/
default/icons/general/disabled_arrow.png" alt="Detail Toggle Icons
Column" width="16" height="16" /></div></td>
<td><div class="inUse">In Use</div></td>
<td>{some data}</td>
<td>{more data}</td>
<td>{data}</td>
<td>{data}</td>
<td>{data}</td>
<td class="optionCell">{Options for data go here}</td>
</tr>
<tr id="detail-row01" class="details">
<td colspan="8">{Bunch of detail stuff goes here</td>
</tr>
Here is the code that parses the above html:
function setDetail()
{
// for the arrow detail toggles
$('table').find('tr').each(function(i)
{
var rowId = $(this).attr('id');
//if(i < 5) alert(trId.match('detail'));
if(rowId && !rowId.match('detail'))
{
var imageRow = '#' + rowId;
var imageCellId = '#arrow-' + rowId;
var imageCellImage = imageCellId + ' div img'; // the detail arrow
icon
var imageCellDiv = imageCellId + ' div'; // the detail arrow icon
container
var detailDiv = '#detail-' + rowId;
$(detailDiv).hide(); // hide the details
$(imageCellImage).hide();
$(imageCellDiv).addClass('arrowHidden').css({width:'20px',
height:'18px'}).hover(function()
{
if($(imageRow).attr('class') != 'text2')
{
$(imageRow).attr('class','text4');
$(imageCellDiv).removeClass('arrowHidden');
}
else
{
$(imageCellDiv).removeClass('arrowShow');
}
$(imageCellDiv).addClass('arrowActive');
},
function()
{
if($(imageRow).attr('class') != 'text2')
{
$(imageRow).attr('class','text3');
$(imageCellDiv).removeClass('arrowActive');
$(imageCellDiv).addClass('arrowHidden');
}
else
{
$(imageCellDiv).removeClass('arrowActive');
$(imageCellDiv).addClass('arrowShow');
}
}
).click(function()
{
if($(imageRow).attr('class') == 'text2')
{
$(imageRow).attr('class','text4');
$(detailDiv).hide();
}
else
{
$(imageRow).attr('class','text2');
$(detailDiv).show();
}
setFooter(); // re-calculate the footer possition
}
);
}
});
}
The table that I have the biggest issue with is the one that has about
160 such html blocks (so about 320 total rows). jQuery 1.2.6 goes
through and parses the table very quickly with no issues. When do the
same thing using jQuery 1.3.1, it slows way down. It parses about a
quarter of the table, and then the browser throws a timeout error. If
I select continue, it will parse about half it did before, and through
another timeout error, click continue, parses about half of that, time
out, and on and on. I will have to hit the continue button at least 12
times to parse the whole table.
I have done some testing to see if I can fix the problem. If I comment
out the two hide statements and the addclass/hover statement so the
code is not manipulating the tabel, it speeds way up. It is only when
I uncomment one statement, and it does not matter which one or the
number, that it slows way down.
I would like to move up to 1.3.1, but it is not usable to me in its
current state. If anybody can help me with fixing this, or if future
versions of jQuery can be fixed (if jQuery is at blame at all), it
would be much appreciated.
Thanks!