Dynamic addition of table data rows using javascript (example of saving ASP background database)

In many web applications, we may encounter many scenarios where multiple rows of records need to be inserted dynamically. For example, on the talent website, when we fill in our resumes, we need to fill in our project experience. We can dynamically Add a number based on our actual situation, this is not added in the form of a separate page. This dynamic addition is dynamically added under the same page, and finally submitted to the server and saved to the database.

In this article, I will use a similar example to add data items dynamically in the foreground using Javascript and save the data to the database in the background.

Browser: IE.6.0
Background: ASP (VBScript)
Foreground: HTML + JavaScript

HTML code:

Copy codeThe Code is as follows:
<Script src = "myjs. js"> </script>

<Form name = frmUserInfo action = "saveInfo. asp" method = post>
<Table>
<Tr>
<Td> Name: <input id = txtName name = Name> </td>
<Td> Sex: <input id = txtSex name = Sex> </td>
</Tr>
</Table>
<Br>
<Table id = tabUserInfo border = 1>
<Tr>
<Td> Project name: </td>
<Td> Befre description: </td>
<Td> Begin date: </td>
<Td> Finished date: </td>
<Td> Delete </td>
</Tr>
<Tr style = "display: none" id = trUserInfo>
<Td id = tdUserInfo> <input id = txtPName name = ProjectName> </td>
<Td id = tdUserInfo> <input id = txtDesc name = Desc> </td>
<Td id = tdUserInfo> <input id = txtBDate name = BDate> </td>
<Td id = tdUserInfo> <input id = txtFDate name = FDate> </td>
<Td id = tdUserInfo> </td>
</Tr>
<Tr>
<Td> <input type = button value = "Add" onclick = "addRow (document. all. tabUserInfo, null, 1, 1)"> </td>
</Tr>
</Table>

<Table>
<Tr> <td> <input type = submit value = Submit> <input type = reset> </td> </tr>
</Table>
</Form>



JS Code:
Copy codeThe Code is as follows:
/** // * This function is used to add one row dynamicly
* TabObj: Target table
* ColNum: The number of columns that of a row in table
* SorPos: The source of the new row.
* TargPos: The position where the new row will be added.
*
*/
Function addRow (tabObj, colNum, sorPos, targPos )...{
Var nTR = tabObj. insertRow (tabObj. rows. length-targPos); // Insert a new row into appointed table on
// Appointed position.
Var TRs = tabObj. getElementsByTagName ('tr'); // Get TRs collection from the appointed table
Var sorTR = TRs [sorPos]; // Positioned the sorTR
Var TDs = sorTR. getElementsByTagName ('td '); // Get TDs collection from the appointed row
If (colNum = 0 | colNum = undefined | colNum = isNaN )...{
ColNum = tabObj. rows [0]. cells. length;
}

Var ntd = new Array (); // Create a new TDs array
For (var I = 0; I <colNum; I ++)... {// Traverl the TDs in row
Ntd [I] = nTR. insertCell (); // Create new cell
Ntd [I]. id = TDs [0]. id; // copy the TD's id to new cell. | Attention! The TDs's
// Suffix must be appointed
Ntd [I]. innerHTML = TDs [I]. innerHTML; // copy the value in ntd [I]'s innerHTML from corresponding TDs
}

}
/** // * This function is used to remove appointed row in appointed table
* TabObj: the appointed table
* TargPos: target row position
* BtnObj: currently clicked delete image button
*
*/
Function deleteRow (tabObj, targPos, btnObj)... {// Remove table row
For (var I = 0; I <tabObj. rows. length; I ++ )...{
If (tabObj. getElementsByTagName ('img ') [I] = btnObj )...{
TabObj. deleteRow (I + targPos );
}
}
}


Foreground code summary:
The above code has a note, that is, the original line <tr style = "display: none" id = trUserInfo>, we set the style to Display: none, this is because, the following js uses newTD to Add rows. innerHTML = sourceTD. innerHTML: directly copy the content of an existing column to the innerHTML attribute of the newly added column, therefore, the "Data Source" column is hidden to prevent users from deleting and the "Object already Ted" error occurs.

VBScript code:
Copy codeThe Code is as follows:
<%
####### Begin Transcation #####
Conn. beginTrans 'Start a transaction
SQL = "insert into UserInfo (username, sex) values ("
SQL = SQL & "'" & request ("Name ")&"',"
SQL = SQL & "'" & request ("Sex ")&"')"
Response. Write SQL & "<p>"
Conn.exe cute (SQL)

If request ("ProjectName"). count> 0 then
Dim maxid
Maxid = 1
SQL = "select max (id) as maxid from UserInfo"
Set rs = conn.exe cute (SQL)
Maxid = rs ("maxid ")
Rs. close
Set rs = nothing


For I = 1 to request ("ProjectName"). count
SQL = "insert into ProjectInfo (uid, pname, pdesc, bdate, fdate) values ("
SQL = SQL & "& maxid &","
SQL = SQL & "'" & request ("ProjectName") (I )&"',"
SQL = SQL & "'" & request ("Desc") (I )&"',"
SQL = SQL & "'" & request ("BDate") (I )&"',"
SQL = SQL & "'" & request ("FDate") (I )&"')"
Response. Write "" & SQL & "<br>"
Conn.exe cute (SQL)
Next
End if

If conn. Errors. count> 0 then 'If occus any error in the transaction, roll back transcation
Conn. RollBackTrans
Else 'If not error, commit the transcation
Conn. commitTrans
End if
Conn. close
Set conn = nothing

%>

Summary of Background code:
To obtain multiple data, call request (""). count to determine the number of records to be inserted into the primary table. Due to the uncertain number of data operations, data inconsistency is caused to prevent exceptions during database operations. We use transaction management. Transaction Management features atomicity, consistency, and so on. This ensures data security. We call conn at the beginning of the database operation. beginTrans opens a transaction and uses conn at the end of the data operation. errors. count to determine whether errors occur during the transaction. If an error or exception occurs, conn. rollBackTrans rollback. Otherwise, the transaction is committed to complete database operations.

Preview:
Figure 1: Enter the data filling page, click Add to Add a row, to Figure 2

Figure 2: add another row and fill in data to Figure 3

Figure 3: After adding two rows of data, click the Submit button to Submit the data.

Figure 4: After the form is submitted, the database will execute several SQL statements printed by the browser, and the data will be successfully added to the database.

Summary:
This article describes how to use Javascript to dynamically add columns of user input data to the foreground, and ASP technology is used in the background to insert data added to the foreground into the database.
I hope it will help my friends who are learning ASP and Javascript.
If you have any questions, contact me. If you have any comments on this article, we warmly welcome your criticism and correction!