Rough Guide To The DOM (part 2) - Turning The Tables
(Page 3 of 8 )
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
// you could also use
// var cellObj =
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>
This article copyright Melonfire 2001. All rights reserved.Next: Well-Formed >>
More DHTML Articles
More By Vikram Vaswani, (c) Melonfire
/ 5 
