Javascript dynamically adds table data rows (ASP background database saving example)_javascript skills

In many web applications, we will encounter many places where multiple rows of records need to be dynamically inserted. For example, on the talent website, when we fill in our resume, we need to fill in our project experience. We can dynamically add the number of items according to our actual situation. This is not added in the form of a separate page. This dynamic addition is in Add them dynamically to the same page, and finally submit them to the server and save them in the database.

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

Browser: IE.6.0
Backend: ASP (VBScript)
Frontend: HTML JavaScript

HTML code:

Copy code The code is as follows:

Name:

Sex:

< ;br>






< /tr>


< td id=tdUserInfo>

< td id=tdUserInfo>

Project name:	Befre description:< /td>	Begin date:	Finished date:	Delete

< tr>

JS code:

Copy code The code is as follows:

/**//*This function is use 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 the
//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 use 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; iif(tabObj.getElementsByTagName('img') [i]==btnObj)...{
tabObj.deleteRow(i targPos);
}
}
}

Front-end code summary:
One thing to note about the above code is that the original line , we set the style to Display:none , this is because the newTD.innerHTML = sourceTD.innerHTML method is used to add rows in the following js, that is, the content of the existing column is directly copied to the innerHTML attribute of the newly added column, so the "data source" is hidden. "The column is prevented from being deleted by the user with an "Object excepted" error.

VBScript code:

Copy code The 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&"

"
conn.execute(sql)

if request("ProjectName").count>0 then
dim maxid
maxid = 1
sql = "select max(id) as maxid from UserInfo"
set rs = conn.execute(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&"
"
conn.execute(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

%>

Backend code summary:
The method to obtain multiple data is to call request("").count, and use the number of count to determine the number of children to be inserted into the main table. The table records the number of times. Since the number of data operations is uncertain, in order to prevent exceptions from occurring when performing database operations, resulting in data inconsistency. We use transaction management. Transaction management has the characteristics of atomicity, consistency, etc. Data security can be guaranteed. We call conn.beginTrans to open a transaction at the beginning of the database operation. At the end of the data operation, we use conn.Errors.count to determine whether an error occurred during the transaction. If an error or exception occurs, conn.RollBackTrans rolls back. Otherwise, commit the transaction and complete the database operation.

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

Picture 2: Add another row and fill in the data to Figure 3

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

Figure 4: After submitting the form, the database will execute several SQL statements as 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 for user input data in the frontend, and use ASP technology in the backend to insert the data added in the frontend into the database.
I hope it will be helpful to those who are learning ASP and Javascript.
If you have any questions, you can contact me. If you have any comments on this article, you are warmly welcome to criticize and correct me!