Categories:

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"


Sponsored By

DD CSS Library
Free CSS menus and codes to give your site a visual boost.

DOM Window
DOM Document
DOM Element
DOM Event
DOM Style
DOM Table
Miscellaneous

 

CopyRight (c) 2018 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info