Section 5.6. DOM Stuff for Tables

5.6. DOM Stuff for Tables

XHTML tables have methods and properties that the other XHTML elements do not have. These special methods and properties are specifically designed for manipulating parts of the table in a more precise manner. To use these methods and properties, however, you must think of a table in the full XHTML specification. An XHTML table contains a <caption>, a <thead>, a <tfoot>, and any number of tbodies:

caption

References the <caption> of a table

thead

References the <thead> of a table, if there is one

tfoot

References the <tfoot> of a table, if there is one

tbodies

Reference a collection with one entry for every <tbody> that exists for the table (there is usually just one <tbody>, table.tbodies[0])

A rows collection corresponds to all the rows in each <thead>, <tfoot>, and <tbody> node. Each row has a cells collection, which contains every <td> or <th> element in that given row. Every cell contains all of the normal DOM methods and properties associated with an XHTML element. Consider the following table, which is displayed in Figure 5-7:

Code View:

<table id="oreillyBooks" summary="Some O'Reilly books on Ajax">
    <caption>O'Reilly Ajax Books</caption>
    <thead>
        <tr>
            <th>Title</th>
            <th>Author(s)</th>
            <th>Published Date</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="3">Ajax books from oreilly.com</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Ajax Design Patterns</td>
            <td>Michael Mahemoff</td>
            <td>June 2006</td>
        </tr>
        <tr>
            <td>Ajax Hacks</td>
            <td>Bruce W. Perry</td>
            <td>March 2006</td>
        </tr>
        <tr>
            <td>Head Rush Ajax</td>
            <td>Brett McLaughlin</td>
            <td>March 2006</td>
        </tr>
        <tr>
            <td>Programming Atlas: Rough Cuts</td>
            <td>Christian Wenz</td>
            <td>March 2006</td>
        </tr>
    </tbody>
</table>


					  

Figure 5-7. An XHTML table to be manipulated by the DOM

Using the DOM properties to reference elements in the table, here are some examples of how to reference table nodes:

Code View:

var table = $('oreillyBooks');

x = table.tBodies[0].rows[0].cells[1].firstChild.value; // Michael Mahemoff
x = table.tHead.rows[0].cells[2].firstChild.value; // Published Date
x = table.tBodies[0].rows[2].cells[0].firstChild.value; // Ajax Design Patterns
x = table.tFoot.rows[0].cells[0].firstChild.value; // Ajax books from oreilly.com


					  

Tables, along with their child elements, have methods that you can use for creating, inserting, and deleting, as shown in Table 5-16.

Table 5-16. DOM table methods

Method	Description	Element
createCaption( )	Creates a new table caption object, or returns an existing one.	HTMLTableElement
createTFoot( )	Creates a table footer row, or returns an existing one.	HTMLTableElement
createTHead( )	Creates a table header row, or returns an existing one.	HTMLTableElement
deleteCaption( )	Deletes the table caption, if one exists.	HTMLTableElement
deleteCell(index)	Deletes a cell from the current row at the passed index. If the index is -1, the last cell in the row is deleted.	HTMLTableRowElement
deleteRow(index)	Deletes a table row found at the passed index. If the index is -1, the last row in the table is deleted.	HTMLTableElement, HTMLTableSectionElement
deleteTFoot( )	Deletes the footer from the table, if one exists.	HTMLTableElement
deleteTHead( )	Deletes the header from the table, if one exists.	HTMLTableElement
insertCell(index)	Inserts an empty cell into this row at the passed index. If the index is -1 or is equal to the number of cells, the new cell is appended.	HTMLTableRowElement
insertRow(index)	Inserts a table row found at the passed index. If the index is -1 or is equal to the number of rows, the new row is appended to the last row.	HTMLTableElement, HTMLTableSectionElement

The methods are easy to use, as the descriptions in the table of methods show. The following is an example of the createCaption( ) method:

var x = $('myTable').createCaption( );

x.appendChild(document.createTextNode('This is my table caption'));

Likewise, it's easy to use methods such as insertRow( ) and insertCell( ), as the following illustrates:

var x = $('myTable').insertRow(2);
var a = x.insertCell(0);
var b = x.insertCell(1);
var c = x.insertCell(2);

a.appendChild(document.createTextNode('New data in column one'));
b.appendChild(document.createTextNode('New data in column two'));
c.appendChild(document.createTextNode('New data in column three'));

Using the table of O'Reilly books that produced Figure 5-7, this code would produce Figure 5-8. That's all there really is to manipulating tables using DOM methods and properties. Of course, most of the normal DOM properties and methods could accomplish the same things, but the DOM table methods and properties make things simpler.

Figure 5-8. The DOM manipulated table