Hi,
I am trying to get a dynamic table going. You click a button to add a
row. In the newly created row a button to delete the row is placed
(try the code example below). In Netscape, pressing the delete row
button crashes the browser. Why ? What is the correct way to do this ?
I am stumped why this following code works in IE and Opera but crashes
Netscape 7 (ie makes it disappear and try to send a bug report etc).
Any help would be much appreciated.
Copy and save the following code example and try running in Netscape 7
(or Mozilla 1.4) . It works fine in IE 6 and Opera 7. I've tried all
sorts of tweaking around but to no avail.
I need some expert help. Perhaps suggest the correct or other better
way of implementing this.
Here's the code:
<html><head>
<script language="javascript">
function createTableRow(oTable)
{
var thetable = document.all ? document.all[oTable] :
document.getElementById(oTable); // get table object handle
var nrows=thetable.rows.length; // get current tablesize
var row = thetable.insertRow(nrows); // create a new row object
var cell ;
cell = row.insertCell(0); cell.innerHTML="row"+nrows; // create a new
cell in the new row
// this will crash my netscape 7.2 browser but works fine in Opera
and IE
cell = row.insertCell(1); cell.innerHTML="<button
onclick='deleteTableRow(this.parentNode.parentNode .rowIndex)'>Delete</button>";
// This will behave strangely in that it will remove ALL rows from
the table - why ??? again, it works in Opera and IE.
//cell = row.insertCell(1); cell.innerHTML="<button
onclick='deleteTableRow(0)'>Delete</button>";
}
function deleteTableRow(nth)
{
var thetable = document.all ? document.all['tbl'] :
document.getElementById('tbl'); // get the tbl table object handle
thetable.deleteRow(nth); // delete the nth row from the table ####
this crashes Netscape 7 and 6 - WHY ????
}
</script>
<body bgcolor=white>
<form name="form1" method="post" action=""
enctype="multipart/form-data" >
<table border=1 width="232">
<!--col width=150><col width=150><col width=80-->
<tr><th>Name</th><th>Qty</th></tr>
</table>
<table id='tbl' border=1>
<col width=150><col width=150><col width=80>
<!-- TABLE for the order items -->
</table>
<input TYPE="button" VALUE="Add Item"
onclick="createTableRow('tbl')">
<input type="submit" name="Submit" value="Submit" >
</form></body></html>
