Turning The Tables - DHTML

Now that you know the theory behind the new DOM, it's time totake off the gloves and get your hands dirty. In this article, find out howthe new rules apply to old favourites like image swaps, form validation andframe navigation, and then learn how to use ordinary JavaScript to add andremove elements from the document tree on the fly.

TABLE OF CONTENTS:

By: Vikram Vaswani, (c) Melonfire

Poor Best

Rating:

/ 5

May 09, 2001

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

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>

Next: Well-Formed >>