Thanks for the replies, attached is the code, I tried Rob's
suggestion. It doesn't seem to fix the problem.
<html>
<head>
<script src='/Script/query.js' LANGUAGE='JavaScript1.2' TYPE='text/
javascript'></script>
When posting code, manually wrap it at about 70 characters to avoid
auto-wrapping causing errors. Only post a minimal working example
that shows the problem - if those six script files aren't relevant to
the issue, don't include them.
The language attribute is deprecated, using that particular value is
also problematic in some older browsers. Just remove it.
[...]
<script type="text/javascript">
var rownum = 0;
var pause = false;
var timeout = 10;
var rowsize = 20;
You should avoid large numbers of global variables, there are
strategies to deal with this.
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
var row = tbl.insertRow(lastRow);
var cellLeft = row.insertCell(0);
cellLeft.innerHTML= "2828233665" + rownum++;
cellLeft = null;
There is no need to set cellLeft to null here.
cellLeft = row.insertCell(1);
cellLeft.innerHTML="<FORM id="+rownum++ +"
An ID value is not allowed to start with a number - though it's
unlikely to cause a problem, it isn't valid.
[... huge slab of innerHTML removed ...]
Don't use such a very large slab of innerHTML as a single string.
Break it up into a number of lines by:
1. Ensuring that it works as HTML
2. Breaking it into manageable pieces and
ensuring that it works with document.write
3. Putting it into the function and ensuring it works
cellLeft = null;
row = null;
tbl = null;
lastRow = null;
Nice try, but you say it doesn't work... :-(
That strategy is handy to avoid memory leaks with circular refernces,
but you don't seem to have any. Of course I can't tell what is
happening in those 6 script files.
}
function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 1) {
tbl.deleteRow(1);
}
tbl = null;
Again, not necessary.
}
function fillTable() {
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
for (i = 0; i < lastRow; i++) {
removeRowFromTable();
}
for (i = 0; i < rowsize; i++) {
addRowToTable();
}
setTimeout("addRemove();", timeout);
}
function addRemove() {
if (pause)
return;
removeRowFromTable();
// CollectGarbage();
addRowToTable();
setTimeout("addRemove();", timeout);
}
</script>
</head>
<body onload="fillTable();">
<p>
<input type="button" value="Pause" onclick="if (pause) {this.value =
'Pause'; pause = false; setTimeout('addRemove();', timeout);} else
{ this.value = 'Resume'; pause = true;}" />
Don't use XHTML markup in an HTML document.
</p>
Delay: <input type="text" name="delay" value="40"/> ms
<input type="button" value="Set Delay" onclick="timeout=delay.value" />
Where is delay.value set? Do not depend on IE's quirk of setting
names and IDs as global variables, consider:
<br>
Rows: <input type="text" name="rows" value="20"/> rows
<input type="button" value="Set Rows" onclick="rowsize=rows.value;
fillTable();" />
Same here.
<div id="displaytable" style="position:relative;width:970px;height:
0px;overflow:hidden">
I don't know what that does in IE, but in Firefox and Safari, that
makes your table contents invisible.
Here is a trimmed-down version that "works" and does not seem to hog
memory in Firefox, Safari or IE.
<html>
<head> <title>foo</title>
<script type="text/javascript">
var rownum = 0;
var pause = false;
var timeout = 10;
var rowsize = 20;
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var row = tbl.insertRow(-1);
var cellLeft = row.insertCell(0);
cellLeft.innerHTML= "2828233665 " + rownum++;
cellLeft = row.insertCell(1);
cellLeft.innerHTML = 'foo';
}
function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 1) {
tbl.deleteRow(1);
}
tbl = null;
}
function fillTable() {
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
for (var i=0; i<lastRow; i++) {
removeRowFromTable();
}
for (i=0; i<rowsize; i++) {
addRowToTable();
}
setTimeout("addRemove();", timeout);
}
function addRemove() {
if (pause)
return;
removeRowFromTable();
addRowToTable();
setTimeout("addRemove();", timeout);
}
</script>
</head>
<body onload="fillTable();">
<p>
<input type="button" value="Pause" onclick="
if (pause) {
this.value = 'Pause';
pause = false;
setTimeout('addRemove();', timeout);
} else {
this.value = 'Resume'; pause = true;}
">
</p>
Delay: <input type="text" name="delay" value="40"> ms
<input type="button" value="Set Delay" onclick="timeout=this.value">
<br>
Rows: <input type="text" name="rows" value="20"> rows
<input type="button" value="Set Rows" onclick="rowsize=this.value;
fillTable();" >
<div id="displaytable">
<table border="1" id="tblSample" width="100%">
<tr>
<th width="10%">ID1</th>
<th width="90%">ID</th>
</tr>
</table>
</div>
</body>
</html>
