JavaScript tutorial - DOM tables

Navigation

Skip navigation.

Site search

Site navigation

• How To Create home

JavaScript tutorial

• Important guidelines
• Introduction to JavaScript
• Examples
• Adding JavaScript to a page
• Object oriented programming
• Operators
• Variables
• Control structures
• Writing with script
• Writing functions
• Referencing
• Browser inspecific referencing
• Browser specific referencing
• DHTML
• Element contents
• Window size and scrolling
• Event information
• Creating objects
• Creating time delays
• Using cookies
• Security
• Semicolons
• The JavaScript object
• W3C DOM introduction
• DOM nodes and tree
• DOM tables
• DOM CSS
• DOM Style Sheets
• DOM events
• DOM objects and methods

Printing

• View tutorial as a single document
• Print styling information
• Printing policy

Other tutorials

• CSS tutorial
• HTML tutorial
• Site design

DOM tables

• Tkhtml Hv3 only supports table.tBodies, tBodies[].rows, rows[].cells and childNodes, but none of the other properties shown here.
• Pre-alpha versions of Tkhtml Hv3 only support table.tBodies and childNodes, but none of the other properties shown here.

Assuming that you have a reference to the table element (see the last section), you can do some fairly in-depth manipulation of the table's structure. In order to do this, you have to view tables as in the full HTML4 specification. A table contains a caption, a thead, any number of tbodies, and a tfoot. If you did not specify a tbody, the DOM will still have one tbody in the tBodies collection, which will contain all of the rows. There are many methods associated with these. Most of those designed to create parts of tables, as well as the one to delete table captions, are not implemented properly in some older browsers, so I will concentrate on those that are the most reliable.

• table
  • caption
    • childNodes[]
  • tHead
    • rows[]
      • cells[]
        • childNodes[]
  • tFoot
    • rows[]
      • cells[]
        • childNodes[]
  • tBodies[]
    • rows[]
      • cells[]
        • childNodes[]

As well as being able to walk through the DOM tree as before, you can also walk through the DOM table tree. Each table has four extra properties that reference the various childNodes:

caption

References the caption of the table

thead

References the thead of the table, if there is one

tfoot

References the tfoot of the table, if there is one

tbodies

A collection with one entry for each tbody (usually just table.tbodies[0])

Each thead, tbody and tfoot also has a rows collection with an entry for each row in that thead, tbody or tfoot. Each row has a cells collection containing every td or th cell in that row. Each cell then contains the usual DOM references to its contents.

Each table also has the createTHead() and createTFoot() methods to create or return the thead or tfoot respectively, as well as the deleteTHead() and deleteTFoot() methods to delete them. There are also the createCaption() and deleteCaption() methods to create/return and delete the caption. These methods do not work correctly in Internet Explorer on Mac. Adding tbodies can only be done with basic DOM methods - there is no dedicated method.

Adding a row to a table

• Internet Explorer on Mac has very poor support for creating table elements using the dedicated methods - as a result, this tutorial avoids those, and uses normal DOM core instead.

The DOM provides dedicated methods for creating and adding rows, but these fail in Internet Explorer on Mac. It is easier to just use normal DOM methods, since these work in everything:

var theTable = document.getElementById('tableId');
theTable.tBodies[0].appendChild(document.createElement('tr'));

Rows have the rowIndex property, giving their index within their table, and the sectionRowIndex property, giving their index within their thead/tfoot/tbody.

The thead, tfoot and tbodies each have the dedicated method insertRow which can be used to add rows in all current browsers. This accepts a parameter; the 0-based index of where to add the new row (or -1 to append it at the end). They have the deleteRow method to delete them, which accepts the same index parameter, with -1 deleting the last row. These methods do not work correctly in Internet Explorer on Mac.

Adding one cell to every row in a table

• Internet Explorer on Mac has very poor support for creating table elements using the dedicated methods - as a result, this tutorial avoids those, and uses normal DOM core instead.
• Older Konqueror, Safari and OmiWeb get the cellIndex property wrong.

This example adds a new cell on the end of every row in a table. It assumes that table has both a thead, and a tfoot. Again, there are dedicated methods for this, but these fail in Internet Explorer on Mac, so they are not used here:

var theTable = document.getElementById('tableId');
for( var x = 0; x < theTable.tHead.rows.length; x++ ) {
  var y = document.createElement('td');
  y.appendChild(document.createTextNode('Thead cell text'));
  theTable.tHead.rows[x].appendChild(y);
}
for( var z = 0; z < theTable.tBodies.length; z++ ) {
  for( var x = 0; x < theTable.tBodies[z].rows.length; x++ ) {
    var y = document.createElement('td');
    y.appendChild(document.createTextNode('Tbody cell text'));
    theTable.tBodies[z].rows[x].appendChild(y);
  }
}
for( var x = 0; x < theTable.tFoot.rows.length; x++ ) {
  var y = document.createElement('td');
  y.appendChild(document.createTextNode('Tfoot cell text'));
  theTable.tFoot.rows[x].appendChild(y);
}

Cells have the cellIndex property (except in early Konqueror versions), giving their index within their row.

Rows have the dedicated method insertCell which can be used to add cells in all current browsers. This accepts a parameter; the 0-based index of where to add the new row (or -1 to append it at the end). The added cell will always be a td, not a th. Rows have the deleteCell method to delete them, which accepts the same index parameter, with -1 deleting the last row. These methods do not work correctly in Internet Explorer on Mac.

Last modified: 19 March 2011

1. Previous
2. Next