The insertRow() and insertCell() functions are used to add rows (tr's) and cells (td's) into a table which is already on the page. Here's a small table code on which we will be using insertRow() and insertCell().
<table id="table"> <tbody id="tbody"> <tr> <td> Cell Info1 </td> </tr> <tr> <td> Cell Info2 </td> </tr> </tbody> </table>
We have 1 table, 1 tbody, 2 rows and 2 cells in this example. You don't need to add a tbody tag when creating a table in HTML, but when you use functions such as insertRow() where you will be adding rows, you have to add them to the tbody and not the table. Because it is the tbody that actually holds the rows and the cells, not the table. As you can see, I have added a ID to the tbody tag, if there is no ID on the table or tbody tag you can use the "getElementsByTagName" function. Let's add a row and a cell to the end of the tbody.
<script type="text/javascript">
var tBody = document.getElementById('tbody');
var iRow = tBody.insertRow(2);
var iCell = iRow.insertCell(0);
iCell.innerHTML = 'Cell Info3';
</script>
Now let's break the code down :)
var tBody = document.getElementById('tbody');
Gets the tbody tag with the "getElementById" function and assigns it to the variable "tBody".
var iRow = tBody.insertRow(2);
var iCell = iRow.insertCell(0);
The argument you pass on in the insertRow function is a integer representing the location of where you want to add the row. Because we want to add a third row, remember we start counting at 0 with javascript, we add a 2 as the argument. If you, instead of the 2, inserted a 3 as the argument, the code would return a error. Because you can't add a fourth row if there is not yet a third one ;). So the newly added row is assigned to the variable "iRow". We then add a cell to that row with the insertCell() function. The arguments work the same here as with insertRow(), only this time they're for cells :P.
If you are uncertain how many rows there are a the tbody and still want to add a row at the end of the table. You can use ".rows.length" which you add after a grabbing a tbody: "document.getElementById('tbody').rows.length" This will return a integer value, but this method does not start counting at zero, so with "document.getElementById('tbody').rows.length" it would return 2 which we can also put in the insertRow() function as shown in the example (where we used 2), to add a row to the end of the table. Here's how we can use this method:
<script type="text/javascript">
var tBody = document.getElementById('tbody');
var iRow = tBody.insertRow(tBody.rows.length);
var iCell = iRow.insertCell(0);
iCell.innerHTML = 'Cell Info3';
</script>
See how I added "tBody.rows.length" as the argument of the insertRow() function? If you grabbed a table instead of the tbody, and you want to use these 2 functions, you can use ".firstChild". So it would look something like this:
<script type="text/javascript">
var Table = document.getElementById('table');
Table.firstChild.insertRow(2);
</script>
Even if you can't see a tbody tag, it is always there, even if you don't add the tag itself. So that's basicly how these 2 functions work. Have fun with them ^_^