Wednesday, 14 August 2013

Javascript performance suffers when hiding/displaying nested tables

Javascript performance suffers when hiding/displaying nested tables

Right now on my html page that dynamically generates about 15 different
tables with about 1-15 rows in each table. When a user clicks a certain
cell, a nested table appears in the row beneath. Everything appears fine
and it does what it needs to do, it's just that there is about 2 second
delay from when the user clicks the cell to open the nested table, to when
the nested table actually displays.
Anything I can do to cut back on the time? Or any tips to alleviate this?
Light example http://jsfiddle.net/poppypoop/ZUTXT/1/
my HTML
<table>
<tr>
<td></td>
<td class="clickme">
<div style="display: none;">
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</td>
<td></td>
</tr>
In this nested table I display various information in each cell for my
application. Typically the nested table can have anywhere between 1 row to
10 rows
So when the user clicks the cell to display the nested table, here is the
javascript that gets called
$(item).closest("tr").after("<tr><td></td><td colspan = '999'>" +
$(item).next().html() + "</td></tr>");

No comments:

Post a Comment