Using the HTML Table Element as a Recordset

The following code would return or set the text and/or code that is in the table cell in row i and column j.

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

Note the innerHTML property of the Table Cell object in the statement. Also note that counting of rows or cells or columns begins from zero.

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

<br /><br />

<button type="button" onclick="modifyRow(2)">Modify Row</button>

The above button will call the following function, which uses an array. Include this code in the JavaScript above.

arr1 = new Array(6)

arr1[0]="70";

arr1[1]="Wright";

arr1[2]="30";

arr1[3]="Sales";

arr1[4]="4";

arr1[5]="18045.50";

function modifyRow(rowNo)

{

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

{

document.getElementById('Recordset1').rows[2].cells[j].innerHTML = arr1[j];

}

}

The function takes the row number as argument. It replaces all the cell values of the row with the values of the array. If you want to edit only the content of one table cell, you do not need the “for” loop. You can now open the file in a browser and test the code.

Delete a Row

The following statement would delete the row whose index is given, from a table. The index and the position of the deleted row are taken up by the row below it.

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

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

<br /><br />

<button type="button" onclick="deleteRow(3)">Delete Row</button>

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

function deleteRow(rowNo)

{

document.getElementById('Recordset1').deleteRow(3)

}

The function takes the row number 3 as argument. It deletes the row. The row that had the index, namely 4, is now the row with the index 3. You can try the code.