Using the HTML Table Element as a Recordset - Our Illustrative Web Page
(Page 3 of 5 )
The script language I use is JavaScript. Type (copy and paste) the following in a text editor and save the resulting file as a web page (.html). You will be opening it from time to time with your browser.
<html>
<head>
<script type="text/javascript">
function giveNoOfRows()
{
var numberOfRows = document.getElementById('Recordset1').rows.length;
alert(numberOfRows);
}
</script>
</head>
<body>
<table id="Recordset1" border=1>
<tr><td id="TD00">10</td><td id="TD01">Smith</td><td id="TD02">20</td><td id="TD03">Mgr</td><td id="TD04">8</td><td id="TD05">18357.50</td></tr>
<tr><td id="TD10">20</td><td id="TD11">Jones</td><td id="TD12">20</td><td id="TD13">Sales</td><td id="TD14">9</td><td id="TD15">18171.25</td></tr>
<tr><td id="TD20">30</td><td id="TD21">Gates</td><td id="TD22">38</td><td id="TD23">Mgr</td><td id="TD24">4</td><td id="TD25">17506.75</td></tr>
<tr><td id="TD30">40</td><td id="TD31">Bond</td><td id="TD32">38</td><td id="TD33">Sales</td><td id="TD34">6</td><td id="TD35">18006.00</td></tr>
<tr><td id="TD40">50</td><td id="TD41">Murphy</td><td id="TD42">15</td><td id="TD43">Mgr</td><td id="TD44">10</td><td id="TD45">20659.80</td></tr>
</table>
<br />
<button type="button" onclick="giveNoOfRows()">Give No. of Rows</button>
</body>
</html>
Our Recordset
The above HTML table has the data mentioned above. The table is the recordset. Its value for the CSS display property should be “none” if we do not want to see the recordset contents. If we want to see the recordset contents it should be “block.” I have allowed the default value of “block” so that you can see the content.
I will spend the rest of the article telling you how to attain the above five minimum requirements of a recordset.
Total Number of Rows of the Recordset
The following statement returns the reference to an HTML element on the web page based on the ID given.
document.getElementById(id)
If the HTML element is a table, then the following statement would give you the number of rows in the table:
document.getElementById('myTable').rows.length
where myTable is the table ID. Note that word “rows” in the above statement does not take the [] brackets.
In our illustration, the code to give the number of rows is as follows:
var numberOfRows = document.getElementById('Recordset1').rows.length
The ID for our table recordset is ‘Recordset1’.
Open the above file in a browser. Click the “Give No. of Rows” button and an alert box will appear showing the number of rows. In the code the button element calls the function,
function giveNoOfRows()
{
var numberOfRows = document.getElementById('Recordset1').rows.length;
alert(numberOfRows);
}
We shall use a similar approach (button and event) to illustrate the other functions.
Next: Editing Data >>
More HTML Articles
More By Chrysanthus Forcha
/ 5 
