HTML DOM, JavaScript to add/remove table rows (part 1)
I hope you know what DOM is. If no, then I would advise you to read first this tutorial.
We will try to write JavaScirpt code to add/remove rows to table but without using DHTML functions (addRow, addCell etc.), we will use functions to manipulate with DOM tree like appendChild, createElement, createTextNode.
so, we have such HTML code:
We want to create a function which will add a row (<tr> ... </tr>) to the end of our table. The only parameter will be the id of TBODY element:
-
<script type="text/javascript">
-
var i=3; // we will use i variable just for names 'sample 4', 'sample 5', ...
-
function AddEndRow(tid) {
-
// first we create <tr> element
-
var myTR=document.createElement('tr');
-
-
// now we create first cell (<td> element)
-
var myTD=document.createElement('td');
-
-
// it will have one child - text node
-
myTD.appendChild(document.createTextNode('sample '+(++i)));
-
-
// create second cell, and append the child text node 'sample text here 2...'
-
var myTD2=document.createElement('td');
-
myTD2.appendChild(document.createTextNode('sample text here 2 ...'));
-
// now we append our 2 cells to our table row.
-
myTR.appendChild(myTD);
-
myTR.appendChild(myTD2);
-
// after that we add our row (tr) to tbody
-
document.getElementById(tid).appendChild(myTR);
-
}
-
</script>
Graphically it will be like:
1. [myTR]
2. [myTD]
3. [myTD] | -> 'sample '+(++i)
4. [myTD2]
5. [myTD2] | -> 'sample text here 2...'
6. [myTR] | -> [myTD]
7. [myTR] | -> [myTD]
| -> [myTD2]
8. [tid] (tbody) | -> first row of our table
| ....
| -> [myTR]
Now we can add button, which will run our function:
click on the button and you will see how new rows append to the table 
It works fine in all modern browsers (I've tested on FF 1.5, Safari 3, Opera 9, IE 6+)
Now we need also have function to delete the last row.
-
function DelLastRow(tid) {
-
// myTbl -> reference to our Tbody
-
var myTbl=document.getElementById(tid);
-
// go to the last child of tbody - i.e. the last row
-
var deltr=myTbl.lastChild;
-
// remove the last row.
-
myTbl.removeChild(deltr);
-
}
Add a button to the HTML:
-
<input type="button" value="Delete last row" onClick="return DelLastRow('myT');">
Try :). There is a little surprise you will have in Safari and Firefox. You need double click to delete the row, when in Opera and Internet Explorer it works fine. Also you can see, that rows created using our function AddEndRow are removing well in all browsers. Why is it so? Tomorrow I'll tell you... 
to be continued
[…] previous article we programmed two functions: to add and remove a table row. But we had one issue in Safari and […]
Pingback by Volodymyr Osypov blog » Print HTML DOM Tree — May 21, 2008 @ 11:14 am
[…] promised you to improve table row delete function, that’s what we will do today. So now we know the differences of DOM tree in different browsers. We […]
Pingback by Volodymyr Osypov blog » HTML DOM, JavaScript to add/remove table rows (part 2) — May 23, 2008 @ 3:01 pm