Tabular Database Forms with HTML - The addRow() Function
(Page 4 of 4 )
With the Single-Row Form, when the add row function was called, the first thing it did was check to see if we had just left the Edit or Add mode. If that was the case we made the changes to the recordset and then made copies of the affected recordset row to the Transmitted table. We also had this feature with the navigation button functions. We needed this because, after typing in the form, a trigger was required for the effects to take place.
However, here, we can see the recordset. To solve this problem, when you are to add or edit, all the buttons will be disabled. A new button will appear just above the disabled buttons and just below the recordset. It has the text "After Editing or Adding, You must Click here." This button's presence is conspicuous. Since all the buttons are disabled, after editing or adding, the user has no choice other than to click this button. Clicking this button will cause the required effects (updating the Transmitted table).
With the Single-Row Form the "addRowToRecordset()" caused the effects. From what I have explained, we do not need this function here. Some of its features are included in the addRow() Function while others are included in the function called when you click the conspicuous button. Since the addRowToRecordset() function is not needed, it is removed from the code.
The addRow() function first adds a blank row, then it goes on to add six table cells for the six visible columns. While adding the table cells it adds blank Input Text Controls in each new cell. Next it adds the seventh cell, which is not visible to the user, and gives it a cell content of "-1." It goes on to set the addMode variable to "true."
The index value for the added row becomes the former total number of rows (numberOfRows). The new number of rows is incremented to take account of the added row. The main use of the conspicuous button is to include the added or edited row to the Transmitted table. It is then displayed. Lastly the line for an alert box is written. This alert box indicates that the user might have to scroll down to see the added row. This is the addRow() Function:
function addRow()
{
//the row is added at the end of the recordset - you can sort afterward
//insert a blank row at the end of the recordset
document.getElementById('Recordset').insertRow(numberOfRows);
//form the ID of the new row
rowID = 'TR' + (numberOfRows);
//give the new row its ID
document.getElementById('Recordset').rows[numberOfRows].id = rowID;
//insert blank cells, give them IDs and their contents
for (j=0;j<6;j++)
{
//form ID for table cell
RID = "TD" + (numberOfRows) + j;
//form the input text control ID
ID = "EI" + (numberOfRows) + j;
document.getElementById('Recordset').rows[numberOfRows].insertCell(j);
document.getElementById('Recordset').rows[numberOfRows].cells[j].id = RID;
document.getElementById('Recordset').rows[numberOfRows].cells[j].innerHTML = '<input type="text" id="' + ID + '" value="">';
}
//add the seventh blank cell with the value, -1, which shows that the row has not been edited
document.getElementById('Recordset').rows[numberOfRows].insertCell(6);
document.getElementById('Recordset').rows[numberOfRows].cells[6].innerHTML = "-1";
addMode = true;
index = numberOfRows;
//disable the all buttons
disableButtons('A1','E1','D1','So1','S1','Do1');
//increment the total number of rows variable
numberOfRows+=1;
//display the button to send the added row to the transmitted table
document.getElementById('TDAE1').style.display = "block";
alert('You may have to scroll down to see the added row')
}
We continue in the next part of the series.
| 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. |
