In many Web applications, we encounter a lot of places where we need to dynamically insert multiple rows of records. For example, on the talent website, when we fill in the resume, we have to fill in our project experience, we can according to their actual situation dynamically add the number of, this is not a separate page to add, this dynamic add is on the same page dynamically added, and finally submitted to the server together to save to the database.
In this article, I will use a similar example to do a foreground with JavaScript dynamic add data items, background saved to the database example.
Browser: ie.6.0
Background: ASP (VBScript)
Front Desk: HTML + JavaScript
HTML code:
Copy Code code 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 Code code as follows:
/**//*this function is use to add one row dynamicly
* Tabobj:target Table
* colnum:the number of columns of a row in table
* Sorpos:the source of the new row.
* Targpos:the position where the new row would 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 are 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; i<tabobj.rows.length;i++) ... {
if (Tabobj.getelementsbytagname (' img ') [i]==btnobj) ... {
Tabobj.deleterow (I+targpos);
}
}
}
Foreground Code Summary:
The above code has a place to note, that is the original line <tr style= "Display:none" ID=TRUSERINFO>, we set the style to Display:none, which is because, The following JS add line is newtd.innerhtml = sourcetd.innerhtml way, that is, directly to the existing column content directly copied to the newly added column of the InnerHTML property, so hide the "data source" column is prevented from deleting the user appears " Object excepted "error.
VBScript Code:
Copy Code code 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.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& "<br>"
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
%>
Background Code Summary:
The way to get multiple data is to call request (""). Count, with the number of counts to determine the number of child table records to insert into the primary table. Data inconsistency is caused by an indeterminate number of data operations, in order to prevent exceptions when performing database operations. We use transaction management. Transaction management has the following characteristics: atomicity, consistency, and so on. can guarantee data security. We call Conn.begintrans to open a transaction at the beginning of the database operation, and at the end of the data operation, use Conn.Errors.count to determine if there are errors during the transaction, and Conn.rollbacktrans rollback if an error or exception occurs. Otherwise commit the transaction and complete the database operation.
Preview:
Figure I: Enter the Fill data page, click the Add button, add a row, to figure II
Figure two: Add another line and fill in the data to figure three
Figure three: After adding two rows of data, click the Submit button to submit the data
Figure four: After the form is submitted, the database will perform several SQL statements, such as the one that the browser prints, and the data is successfully added to the database.
Summary:
This article describes how to use JavaScript dynamically in the foreground to add user input data columns, and the background using ASP technology to insert the foreground data into the database.
wants to help friends who are learning about ASP and JavaScript.
If you have any questions, you can contact me. If you have any comments on this article, warmly welcome critical corrections!
