javascript: hide rows cause browser to crash... Help!
I'm a newbie here! I've encountered this weird problem in displaying and hiding table rows which causes my IE browser to crash... The idea is that, I have a set of hardcoded rows which I manipulate using display="none" and display="" to hide/show them...
When I click the ADD button, a row should be displayed with its contents then when I click the DELETE button, the selected row should be deleted, but in doing so, my code adjust the contents upward first, meaning copy the contents of the lower rows one level up then hide the last row...
The code works fine... except for this scenario, having more than two rows then deleting the rows one by one starting from the last row... sometimes, it's fine but often my browser crashes...
please try this several times, then tell me whether you also encounter my problem or not... Normally my browser crashes somewhere between DELETE and the next row select... Please Help! Thanks in advance!
- click ADD
- click ADD
- click ADD
- select hello 3
- click DELETE
- select hello 2
- click DELETE
- select hello 1
- click DELETE
here's my code...<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function select(num)
{
var prev = document.getElementById("selectedrow").value;
if (prev != "")
{
document.getElementById("A"+prev).style.backgroundColor = "#FFFFFF";
}
document.getElementById("A"+num).style.backgroundColor = "#CCCCCC";
document.getElementById("selectedrow").value = num;
}
function addRow ()
{
var cnt = parseInt (document.getElementById("count").value);
if (cnt < 3)
{
cnt = cnt + 1;
document.getElementById("row1"+cnt).innerHTML = "hello " + cnt;
document.getElementById("A"+cnt).style.display = "";
document.getElementById("count").value = cnt;
}
}
function deleteRow ()
{
var num = parseInt (document.getElementById("selectedrow").value);
var cnt = parseInt (document.getElementById("count").value);
if (num != "")
{
for (i = num; i < cnt; i++)
{
var j = i + 1;
document.getElementById("row1"+i).innerHTML = document.getElementById("row1"+j).innerHTML;
}
document.getElementById("row1"+cnt).innerHTML = "";
document.getElementById("A"+cnt).style.display = "none";
document.getElementById("count").value = cnt - 1;
document.getElementById("selectedrow").value = "";
document.getElementById("A"+num).style.backgroundColor = "#FFFFFF";
}
}
</script>
</head>
<body>
<form>
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr><td height="1" bgcolor="#CCCCCC"></td></tr>
<tr id="A1" style="display:none" onClick="select(1);"><td height="22"><label id="row11"></label></td></tr>
<tr id="A2" style="display:none" onClick="select(2);"><td height="22"><label id="row12"></label></td></tr>
<tr id="A3" style="display:none" onClick="select(3);"><td height="22"><label id="row13"></label></td></tr>
</table>
<input type="button" value=" ADD " onClick="addRow();"> <input type="button" value="DELETE" onClick="deleteRow();">
<input type="hidden" id="selectedrow" value=""><input type="hidden" id="count" value="0">
</form>
</body>
</html>
[3717 byte] By [jcjen] at [2007-11-19 9:56:38] 