↑
Main Page

deleteCaption

deleteCaption()

— deletes the

element

deleteRow(

position

)

— deletes the row in the given position

insertRow(

position

)

— inserts a row in the given position in the

rows

collection

The

element adds the following:

rows

— collection of rows in the

element

deleteRow(

position

)

— deletes the row in the given position

insertRow(

position

)

— inserts a row in the given position in the

rows

collection

The

<tr/>

element adds the following:

cells

— collection of cells in the

<tr/>

element

deleteCell(

position

)

— deletes the cell in the given position

insertCell(

position

)

— inserts a cell in the given position in the

cells

collection

What does all of this mean? Essentially, it means that creating a table can be a lot less complicated if you

use these convenient properties and methods:

//create the table

var oTable = document.createElement(“table”);

oTable.setAttribute(“border”, “1”);

oTable.setAttribute(“width”, “100%”);

//create the tbody

var oTBody = document.createElement(“tbody”);

oTable.appendChild(oTBody);

//create the first row

oTBody.insertRow(0);

oTBody.rows[0].insertCell(0);

oTBody.rows[0].cells[0].appendChild(document.createTextNode(“Cell 1,1”));

oTBody.rows[0].insertCell(1);

oTBody.rows[0].cells[1].appendChild(document.createTextNode(“Cell 2,1”));

//create the second row

oTBody.insertRow(1);

oTBody.rows[1].insertCell(0);

oTBody.rows[1].cells[0].appendChild(document.createTextNode(“Cell 1,2”));

oTBody.rows[1].insertCell(1);

oTBody.rows[1].cells[1].appendChild(document.createTextNode(“Cell 2,2”));

//add the table to the document body

document.body.appendChild(oTable);

In this code, the creation of

the <table/>

and

elements remain the same. What has changed

is the section creating the two rows, which now makes use of the HTML DOM Table properties and

methods. To create the first row, the

insertRow()

method is called on the

element with an

argument of 0, which indicates the position in which the row should be placed. After that point, the row

can be referenced by

oTBody.rows[0]

because it is automatically created and added into the

element in position 0.

181

DOM Basics

09_579088 ch06.qxd 3/28/05 11:37 AM Page 181