Using the HTML Table Element as a Recordset - Add a Row
(Page 5 of 5 )
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.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 4 
