Professional JavaScript For Web Developers

DOM Basics
❑
❑
❑
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 element adds the following:
❑
❑
❑
cells — collection of cells in the 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 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