Tabular Database Forms with HTML - The Layout continued

(Page 3 of 4 )

<tr id="TR0" onclick="selectRow('TR0')"><td id="TD00"><input type="text" readonly id="EI00" value="10"></td><td id="TD01"><input type="text" readonly id="EI01" value="Smith"></td><td id="TD02"><input type="text" readonly id="EI02" value="20"></td><td id="TD03"><input type="text" readonly id="EI03" value="Mgr"></td><td id="TD04"><input type="text" readonly id="IE04" value="8"></td><td id="TD05"><input type="text" readonly id="EI05" value="18357.50"></td><td id="TD06">-1</td></tr>

<tr id="TR1" onclick="selectRow('TR1')"><td id="TD10"><input type="text" readonly id="EI10" value="20"></td><td id="TD11"><input type="text" readonly id="EI11" value="Jones"></td><td id="TD12"><input type="text" readonly id="EI12" value="20"></td><td id="TD13"><input type="text" readonly id="EI13" value="Sales"></td><td id="TD14"><input type="text" readonly id="EI14" value="9"></td><td id="TD15"><input type="text" readonly id="EI15" value="18171.25"></td><td id="TD16">-1</td></tr>

<tr id="TR2" onclick="selectRow('TR2')"><td id="TD20"><input type="text" readonly id="EI20" value="30"></td><td id="TD21"><input type="text" readonly id="EI21" value="Gates"></td><td id="TD22"><input type="text" readonly id="EI22" value="38"></td><td id="TD23"><input type="text" readonly id="EI23" value="Mgr"></td><td id="TD24"><input type="text" readonly id="EI24" value="4"></td><td id="TD25"><input type="text" readonly id="EI25" value="17506.75"></td><td id="TD26">-1</td></tr>

<tr id="TR3" onclick="selectRow('TR3')"><td id="TD30"><input type="text" readonly id="EI30" value="40"></td><td id="TD31"><input type="text" readonly id="EI31" value="Bond"></td><td id="TD32"><input type="text" readonly id="EI32" value="38"></td><td id="TD33"><input type="text" readonly id="EI33" value="Sales"></td><td id="TD34"><input type="text" readonly id="EI34" value="6"></td><td id="TD35"><input type="text" readonly id="EI35" value="18006.00"></td><td id="TD36">-1</td></tr>

<tr id="TR4" onclick="selectRow('TR4')"><td id="TD40"><input type="text" readonly id="EI40" value="50"></td><td id="TD41"><input type="text" readonly id="EI41" value="Murphy"></td><td id="TD42"><input type="text" readonly id="EI42" value="15"></td><td id="TD43"><input type="text" readonly id="EI43" value="Mgr"></td><td id="TD44"><input type="text" readonly id="EI44" value="10"></td><td id="TD45"><input type="text" readonly id="EI45" value="20659.80"></td><td id="TD46">-1</td></tr>

</tbody>

</table>

</div>

</td>

</tr>

<tr>

<td>

<br />

<form action="http://databaseSite.com/programFile.exe" method="post">

<table>

<tr>

<td colspan="7" id="TDAE1">

<button type="button" id="AE1" onclick="effectAddEdit()"> After Editing or Adding, You must Click here</button>

</td>

</tr>

<tr>

<td>

<button type="button" id="A1" onclick="addRow()"> Add </button>&nbsp;&nbsp;&nbsp;&nbsp;

</td>

<td>

<button type="button" id="E1" onclick="editRow()"> Edit </button>&nbsp;&nbsp;&nbsp;&nbsp;

</td>

<td>

<button type="button" id="D1" onclick="deleteRow()"> Delete </button>&nbsp;&nbsp;&nbsp;&nbsp;

</td>

<td>

<button type="button" id="C1" onclick="clearAdd()"> Clear </button>&nbsp;&nbsp;&nbsp;&nbsp;

</td>

<td>

<button type="button" id="So1" onclick="sort()"> Sort </button>&nbsp;&nbsp;&nbsp;&nbsp;

</td>

<td>

<button type="button" id="S1" onclick="finalize('S1')"> Save </button>&nbsp;&nbsp;&nbsp;&nbsp;

<button type="submit" id="Sa1" style="display:none"> Save </button>

</td>

<td>

<button type="button" id="Do1" onclick="finalize('Do1')"> Done </button>

<button type="submit" id="Don1" style="display:none"> Done </button>

</td>

</tr>

</table>

 

<!-- Transmitted Table -->

<table id="TransmittedTable">

</table>

 

</form>

</td>

</tr>

</table>

</td>

</tr>

</table>

</body>

The start() Function

This function is called when the page is loaded. It replaces the setFirstRow() function for our Single-Row Form. The function simply establishes the total number of rows of the recordset.

In the setFirstRow() function for our Single-Row Form we had to display the data of the first row on the form; we had to disable the Show First and Show Previous buttons and do other things. Here, all those features are not necessary. This is the function:

//the function called onload

function start()

{

//determine the total number of rows

var rowCollection = document.getElementById('Recordset').rows;

numberOfRows = rowCollection.length;

}

Next: The addRow() Function >>
 

More HTML Articles
More By Chrysanthus Forcha

Comments On: Tabular Database Forms with HTML

· The story lives on.Chrys    · Hi,great article about making Tabular forms. Also is previous article about...   >>> Post your comment now!