Document Object Model (DOM) For a Table

Consider the table

<table id="myTable">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>

<script>
// cell 4 can be referenced in several ways
tableNode = document.getElementById("myTable")

// [color blue]method 1[/color]
// remember that the first child of a tableNode is always
// the TBODY node even though you don't write it
val1 = tableNode.firstChild.firstChild.nextSibling.firstChild.nextSibling.innerHTML
// [color red]literally - table.tableBody.firstRow.secondRow.firstCell.secondCell.innerHTML[/color]

// [color blue]method 2[/color]
// here you use the rows array followed by the cells array
// remember that JavaScript arrays start at [0], so [1] refers to the second element of the array
val2 = tableNode.firstChild.childNodes[1].childNodes[1].innerHTML

// [color blue]method 3[/color]
// you could also cheat using the lastChild nodes
// since we want the last child row and last child cell

val3 = tableNode.lastChild.lastChild.lastChild.innerHTML

</script>