I have a html like this:
<div ...>
<table...>
<tr></tr>
<tr></tr>
......
<tr></tr>
</table>
</div>
<div ...> //Progress info window
<div id=ProgressTitle...> ....</div>
<div id=ProgressImage...>....</div>
<div id=progressInfo...>...</div>
</div>
I have a huge table that has more than 1000 rows which contains data information. While user clicks on a button, i will process data within this rows and promopt the progress information window to show the current progress, you can imagine it just looks like the system copying file dialog.
The progress information window shows right on the center of the table. The pe-sucode as follows:
OnAction
{
CenterProgressWindow();
int nRow = 0;
for_each_row_in_table
{
upgrade_progresstitle(nRow...)
upgrade_progressvalue(tabledata[nrow][0]...)
upgrade_progressinfo(tabledata[nrow][2])....
....
}
.....
}
I found it's strange that the application gets slowlier and slowlier while while table row count gets bigger. E.g. the more table row i have, the more slowlier the application runs.
I use the Update function to upgrade the element status, such as text or css style, I guess because the progress information window is right on the center of the table, so when i update the elments in the progress window, the table need to update as well?
Another interesting thing:
<div id="parent">
<ELEMENT id="e1">...
<ELEMENT id="e2">...
<ELEMENT id="e3">...
</div>
code1.
e1.set_text(...)
e1.update();
e2.set_text(...)
e2.update();
e3.set_text(...)
e3.update();
code2.
e1.set_text(...)
e2.set_text(...)
e3.set_text(...)
parent.update();
It seams that code2 runs fast than code1. Why?
Is there any information regarding the update function, when should I pass TRUE as the parameter and when to pass FALSE? Any tricks to improve the efficiency?
Thanks in advance!