Tabular Database Forms with HTML

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.