Next up, tables. Take a look at the following HTML document, which contains a table with two rows, three cells each.
<html>
<head>
</head>
<body>
<table border="1" cellspacing="5"cellpadding="5">
<tr>
<td> R1, C1 </td>
<td> R1, C2 </td>
<td> R1, C3 </td>
</tr>
<tr>
<td> R2, C1 </td>
<td> R2, C2 </td>
<td id="r2c3"> R2,C3 </td>
</tr>
</table>
</body>
</html>
Now, when navigating through a table, there's one important point to be aware of - from the DOM vie, a table must be treated as though it included an additional <tbody> tag immediately after the <table> tag and before the <tr> tags. Adding this to the equation, the page above now looks like this:
<html>
<head>
</head>
<body>
<table border="1" cellspacing="5"cellpadding="5">
<tbody>
<tr>
<td> R1, C1 </td>
<td> R1, C2 </td>
<td> R1, C3 </td>
</tr>
<tr>
<td> R2, C1 </td>
<td> R2, C2 </td>
<td id="r2c3"> R2,C3 </td>
</tr>
</tbody>
</table>
</body>
</html>
The usual DOM navigation rules now apply, as the following example demonstrates. This script drills down to the last cell of the second row and alters both the background colour of the cell and the text string within it.
<script language="JavaScript">
// get to the cell
var cellObj1 =
document.childNodes[0].childNodes[1].childNodes[0].childNodes[0].
childNodes[1].childNodes[2];
var cellObj = document.getElementById("r2c3");
// get to the text within the cell
var cellTextObj = cellObj.childNodes[0];
// set background colour
cellObj.setAttribute("bgcolor", "red");
// and text
cellTextObj.data = "Second row, third column";
</script>