Home arrow DHTML arrow Page 3 - Rough Guide To The DOM (part 2)

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.

  1. Rough Guide To The DOM (part 2)
  2. Making The Swap()
  3. Turning The Tables
  4. Well-Formed
  5. In The Frame
  6. Branching Out
  7. Dumbing It Down
  8. Conclusions
By: Vikram Vaswani, (c) Melonfire
Rating: starstarstarstarstar / 5
May 09, 2001

print this article


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.

>>> More DHTML Articles          >>> More By Vikram Vaswani, (c) Melonfire

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Google Gives Buckyball a Tribute Doodle in H...
- Rough Guide To The DOM (part 2)
- Rough Guide To The DOM (part 1)
- Filters And Transitions In IE5
- Understanding Embedded Fonts

Developer Shed Affiliates


Dev Shed Tutorial Topics: