JavaScript Kit- DOM Table Object Methods

JavaScript Kit > DOM Reference > Here

Table Object Methods

Created: August 28th, 2006

The Table object of the DOM supports a handful of unique properties and methods to help you easily perform tasks like dynamically generate a table or certain rows/columns. This is on top of the standard DOM Element properties/ methods the Table object has access to.

Table object methods

Methods

Description

createCaption()

Creates an empty table caption (until you populate it with text), or if a caption already exists for this table, references that caption.

Example(s):

var mytable=document.getElementById("atable")
var newcaption=mytable.createCaption() //Create new caption
newcaption.innerHTML="New caption text" //Define caption text
alert(mytable.createCaption().innerHTML) //References existing caption

createTFoot()

Creates an empty table tfoot (until you populate it with rows via tfoot.insertRow()), or if a tfoot already exists for this table, references that tfoot.

Example(s):

var mytable=document.getElementById("atable")
var newtfoot=mytable.createTFoot() //Create new tfoot
var newtfootrow=newtfoot.insertRow(0) //Define a new row for the tfoot
var newtfootcell=newtfootrow.insertCell(0) //Define a new cell for the tfoot's row
newtfootcell.innerHTML="My tFoot text here!" //Add some content to the tfoot's cell

createTHead()

Creates an empty table thead (until you populate it with rows via thead.insertRow()), or if a thead already exists for this table, references that thead.

deleteCaption()

Deletes the caption of the table.

deleteRow(index)

Deletes a row (tr) as specified by the "index" parameter, an integer denoting the position of the row to delete within the rows[] collection.

Example(s):

var mytable=document.getElementById("atable")
while (mytable.rows.length>0) //deletes all rows of a table
mytable.deleteRow(0) //delete first row of contracting table until there are none left

deleteTFoot()

Deletes the tfoot of the table.

deleteTHead()

Deletes the thead of the table.

InsertRow(index)

Inserts a new (empty) row to the table as specified by the "index" parameter, an integer denoting the position of the new row within the rows[] collection. You should then use tr.insertCell() to insert new cells into the row. Returns a reference to the new row.

You can specify that the new row be added to the very end of the table by passing in -1 as the "index" parameter value.

Example(s):

var mytable=document.getElementById("atable")
for (var i=0; i<3; i++){ //add 3 new rows with content to the end of a table
var newrow=mytable.insertRow(-1) //add new row to end of table
var newcell=newrow.insertCell(0) //insert new cell to row
newcell.innerHTML="This is row number: "+mytable.rows.length
}

produces something like:

Existing row

This is row number: 2

This is row number: 3

This is row number: 4

moveRow(fromIndex, toIndex)

IE5+ exclusive method that moves a row from its original location to another row location. The first parameter denotes the row you wish to move based on its index position in the rows[] collection, while the 2nd parameter denotes the index position to move the row to. Returns a reference to the moved row.

Example(s):

var mytable=document.getElementById("atable")
mytable.moveRow(0, mytable.rows.length-1) //move first row to the end of the table instead

mytable.moveRow(0, -1) //Alternate way to move first row to the end of the table

Table tr object methods

The tr element of a table supports additional DOM methods of its own, namely, for the creation of table cells within it. Here they are:

Methods	Description
deleteCell(index)	Deletes a td or th element from a tr based on its position within the row's cell[] collection, where index is an integer denoting that position.
insertCell(index)	Inserts a new (empty) cell to the row as specified by the "index" parameter, an integer denoting the position of the new cell within the row's cell[] collection. You can specify that the new cell be added to the very end of the row by passing in -1 as the "index" parameter value. Example(s): var mytable=document.getElementById("atable") var newcell=mytable.rows[1].insertCell(-1) //insert new cell to end of 2nd row newcell.innerHTML="New cell contents"

Methods

Description

deleteCell(index)

Deletes a td or th element from a tr based on its position within the row's cell[] collection, where index is an integer denoting that position.

insertCell(index)

Inserts a new (empty) cell to the row as specified by the "index" parameter, an integer denoting the position of the new cell within the row's cell[] collection.

You can specify that the new cell be added to the very end of the row by passing in -1 as the "index" parameter value.

Example(s):

var mytable=document.getElementById("atable")
var newcell=mytable.rows[1].insertCell(-1) //insert new cell to end of 2nd row
newcell.innerHTML="New cell contents"