Entry
Is it possible to add rows in a table ?
Jun 28th, 2002 00:22
Birkoff, Randy Harmelink, Isabelle Gardaz, http://www.xs4all.nl/~ppk/js/tablefun.html
The URL above defines table manipulation through DOM. Or, another
method would be to try something like this:
<html>
<head>
<script><!--
var counter=0;
function newRow(tableid, loc) {
if (loc == null) loc = "";
mynewrow = eval("document.all." + tableid + ".insertRow(" + loc
+ ")");
counter++;
mynewrow.insertCell();
mynewrow.insertCell();
mynewrow.cells(0).innerHTML = "<td>x" + counter + "</td>";
mynewrow.cells(1).innerHTML = "<td>y" + counter + "</td>";
} // newRow()...
function delRow(tableid, loc){
if (counter > 0) {
if (loc == null) loc = "";
eval("document.all." + tableid + ".deleteRow(" + loc + ")");
counter--;
} // if...
} // delRow()...
</script>
</head>
<body onLoad="newRow('myTable'); newRow('myTable'); newRow('myTable');">
<button style="width: 10em;" onClick="newRow('myTable', 1)">Add Row to
top </button><br>
<button style="width: 10em;" onClick="newRow('myTable')" >Add Row to
bottom</button><br>
<button style="width: 10em;" onClick="delRow('myTable', 1)">Delete
First Row </button><br>
<button style="width: 10em;" onClick="delRow('myTable')" >Delete Last
Row </button><br><br>
<table id=myTable name=myTable border="1">
<thead><tr><th>Location</th><th>Department</th></tr></thead>
<tbody></tbody>
</table>
</body>
</html>
-----------------------------------------
[edit by birkoff]
this entry is very useful, but there's a little bug i found in this
script. when you delete a row at the top of the table and after that
add a new row to it (top or bottom) you get duplicate row numbers.
eg:
table contains rows 1,2,3
delete row 1
add new row (top or bottom)
row number = 3
it's a problem with the counter-- value. it doesn't remember that row
number 3 is already inserted. is there a solution for this problem...?
greetz, birkoff
[/edit]
