JavaScript Examples Bible - UserWorks Technologies

Table and
List Objects
(Chapter 27)
Dynamic object models that take advantage of automatic
page reflow create huge opportunities for creative Web
designers. Nowhere is that more apparent than in the TABLE
element object and all the other objects that nest within (TR,
TH, TD, and so on). Not only is it possible to swap the content
of a table cell at any time, but the object models provide powerful
methods for completely remolding the composition of a
table on the fly.
HTML tables are at once elegant because they provide a lot
of pleasing organization to a page with little code, and also
complex due to the large number of related elements and substantial
list of attributes for each element. Those attributes
become object properties in the modern object model, so it
means that scripters have much to choose from (and be confused
by) when bringing tables to life.
Using the special-purpose methods that insert rows and
cells also takes some initial adjustment for many scripters.
For example, inserting a row has almost no visual effect on an
existing table until you not only insert cells into the row, but
also plant content in the cells. Code examples for these operations
are part of the general discussion of the TABLE object in
the JavaScript Bible.
Designers whose browser targets are IE4+/Windows can
also take advantage of Microsoft’s data binding technology.
Data from external sources can fill tables with only the slightest
bit of HTML markup. Chapter 15 contains examples of this
in its discussion of the dataFld and related properties.
This chapter also includes objects for ordered and
unordered lists (and list items nested within). In concert with
style sheets that can include or exclude elements from page
rendering, these objects provide additional layout opportunities
for clever designers.
11
C H A P T E R
✦ ✦ ✦ ✦
In This Chapter
Modifying table cell
content
Adding and deleting
table rows
Modifying table
dimensions, colors,
and borders
Changing numbering
sequences and bullet
symbols for LI element
objects
✦ ✦ ✦ ✦