1. Computing
Send to a Friend via Email

The Javascript DOM

15. Table Methods

clr gif

If you are coding your HTML using modern techniques then you aren't using tables for layout and are using CSS instead. Tables therefore will be an infrequent addition to your web pages as they will only be used where you have real tabular data to display - which is what tables were added to HTML for in the first place before people hijacked them to set up multicolumn layouts (of course CSS can produce far more complex layouts in much less code than tables can).

Where you do include tables in your page you can of course use all of the standard DOM methods that we have already looked at to access the individual component parts of the table (except for innerHTML which can't be used to reference pieces of tables). Given the number of tags that make up a typical table this would involve a huge amount of code to make even simple changes. The DOM does however provide a special set of access methods specifically for tables in order to reduce the code needed down to a manageable level.

Let's start by looking at the HTML tags that make up a small table so that we can see where all of the component parts are that you may need to access (since many people leave out a lot of the tags that ought to be included since they were not useful when using tables for layout).

<table>
<caption></caption>
<thead><tr><th></th><th></th></tr></thead>
<tfoot><tr><td></td><td></td></tr></tfoot>
<tbody><tr><td></td><td></td></tr>
<tr><td></td><td></td></tr></tbody>
</table>

Where certain of these tags are omitted from your table definition the browser assumes their existance in the appropriate spots in the table and so when you access the table via the DOM those elements will still appear in their appropriate spots. It is best to always code the requisite tags yourself to make sure that you remember that they are there. The caption, thead, and tfoot entries can be safely omitted if you don't have any actual content to put in them but the tbody is always assumed to be there since it is what holds the body of your table content.

Just as an aside before we look at the Javascript DOM commands for accessin the table, the reason that the tfoot goes before the tbody even though it will appar after it in the web page is that it is intended for printed tables to include the thead content at the top of each printed page and the tfoot at the bottom of each printed page (version 8 browsers don't support this yet) and so the footer content needs to be available before the bottom of the first page is reached rather than waiting for the table to finish loading (of course this also means that antique web browsers that don't understand tfoot will display it on the web page in the wrong place but thenyou can't have everything).

The DOM provides the following additional properties and methods that process against the table element itself:

  • caption to access the caption if it exists
  • tBodies an array of tbody elements
  • tFoot to access the tfoot if it exists
  • tHead to access the thead if it exists
  • rows an array of all rows in the table
  • createCaption() adds a caption to the table
  • createTFoot() adds a tfoot to the table
  • createTHead() adds a thead to the table
  • deleteCaption() deletes the caption from the table
  • deleteTFoot() deletes the tfoot from the table
  • deleteTHead() deletes the thead from the table
  • deleteRow(pos) deletes the row in the specified position
  • insertRow(pos) inserts a row in the specified position

In addition to these there are also several DOM methods that apply specifically to the tbody and tr tags. The ones for tbody are:

  • rows an array of the rows within the body of the table
  • deleteRow(pos) deletes the row in the specified position
  • insertRow(pos) inserts a row in the specified position

Note that these properties and methods will only produce the same result as the corresponding table ones when there are no rows in the thead or tfoot.

The tr element has the following DOM properties and methods:

  • cells an array of the th or td cells within the row
  • deleteCell(pos) deletes the cell in the specified position
  • insertCell(pos) inserts a cell into the specified position

Note that those methods where a position is required, the position to use is the numerical value corrersponding to the location of the element withi the array accessible via the corresponding property, ie. to delete or insert at the start you use position 0.

©2014 About.com. All rights reserved.