Using the HTML Table Element as a Recordset

You add (insert) a row using a row index. If you add (insert) a row with index 3, the row which had the index 3 will now have the index 4. When you add a row, it pushes the row which was at its position, and the rows below that one, one step downward. The following statement would add a row with the index value of i.

document.getElementById('Recordset1').insertRow(i)

Notice the method “insertRow(i)” at the end. When you add a row, the row is empty, that is, it does not have a cell. You then have to add (insert) cells in the row. The following statement will add (insert) a cell in the row whose index value is i, and at a position where the cell (column) index is j.

document.getElementById('Recordset1').rows[i].insertCell(j)

Notice the method “insertCell(j)at the end. To add more than one cell, you need a loop.

Now, add the following button (code) to the body element in the above file content.

<br /><br />

<button type="button" onclick="addRow(5,6)">Add Row</button>

The above button will call the following function. Include this code in the JavaScript above.

function addRow(rowNo,noColms)

{

document.getElementById('Recordset1').insertRow(rowNo);

for (j=0;j<noColms;j++)

{

document.getElementById('Recordset1').rows[rowNo].insertCell(j);

}

}

This function takes, as arguments, the row index and the number of cells (noColms -- for number of columns). It produces the row and then the “for” loop produces the cells.

Conclusion

Any good container can be used as a recordset. The HTML table element can be used as a recordset in a web page. With the value of “none” for the CSS display property, you do not see the recordset. With the value of “block” for the CSS display property, you see the recordset. The DOM allows us to use the HTML table as a recordset.