Asp+jsp+javascript Dynamic Implementation Add data row _ Application techniques

In the development of applications, some of the input information is dynamic, such as we want to register an employee's work experience, such as the following figure

If made dead, can only fill in three, if it is four? Or more, it is not added, so it is not good, we can use dynamic Add table row implementation, the following figure, add a row, enter a line of information, so more flexible

Let's take a look at how you can combine JavaScript in ASP and asp.net to achieve this effect:
First of all, dynamic add table is to be implemented in the foreground, of course, the background can also, but may use Ajax, very troublesome, so it is best to use JavaScript to implement, here are two ways to dynamically add table rows:
The first type: source
Javascript:

 <script type= "Text/javascript" >/**//*this function is use to add one row dynamicly * Tabobj:target table * C 
Olnum:the number of columns that's 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 ();//creat e 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 ima GE 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);
 }} </script>

Html

<table id=tabuserinfo border=1 width= "720" > 
<tr> 
 <td> name </td>
 <td> Sex < /TD>
 <td> Age </td>
 <td> hobby </td>
<td>Delete</td> 
</tr > 
<tr style= "Display:none" id=truserinfo> <td id=tduserinfo><input id=username name= 
Username ></td> 
<td id=tduserinfo><input id=usersex name=usersex></td> 
<td Id=tduserinfo><input id=userage name=userage></td> 
<td id=tduserinfo><input id= Userlove name=userlove></td> 
<td id=tduserinfo>

</td> 
</tr> 
<tr> 
<td>

<input Type=button value= "Add" onclick= "AddRow (document.all.tabuserinfo,null,1,1)" ></td> 
</tr > 
</table> 

Here is a bit to note:<tr style= "Display:none" id=truserinfo> is mainly to add data, the text box in the value is empty, otherwise add a new line is a value, so very bad, of course, To prevent the null value from being read, we get the value from index 1 when we get the data group, which we'll talk about in the following

The second way:
JavaScript

<script type= "Text/javascript" >
 function addrow ()
 {
  var root = document.getElementById ("tbody")
  var allrows = root.getelementsbytagname (' tr ');
  var allcells = allrows[0].getelementsbytagname (' TD ');
  var newrow = Root.insertrow ();
  var newCell0 = Newrow.insertcell ();
  var newCell1 = Newrow.insertcell ();
  var newCell2 = Newrow.insertcell ();
  var newCell3 = Newrow.insertcell ();
  newcell0.innerhtml = allcells[0].innerhtml;
  newcell1.innerhtml = allcells[1].innerhtml;
  newcell2.innerhtml = allcells[2].innerhtml;
  newcell3.innerhtml = allcells[3].innerhtml;

 }
 function Removerow (r)
 {
 var root = R.parentnode;
 Root.deleterow (R);
 }
 </script>

Html

 <table border= "1" > <tr> <td>aaaa</td> <td>bbbb< /TD> <td>cccc</td> <td> Operations </td> </tr> <tr> <td><select></sel ect></td> <td><input id= "Text1" type= "text"/></td> <td><input id= "Text2" type= "t Ext "/></td> <td></td> </tr> <tbody id=" tbody "> <tr style=" Display:none "> ;td><select></select></td> <td><input id= "A" type= "text"/></td> <td>& Lt;input id= "B" type= "text"/></td> <td><input type= "button" value= "Remove" onclick= "Removerow ( This.parentNode.parentNode) "/></td> </tr> </tbody> </table> <table><tr>< Td><input type= "button" value= "Add" onclick= "AddRow ()"/></TD></TR></TABLE> 

Note: just like the first one, if you want to have one row by default, you can add a row statically

Below, just to see how to do it through the background, such as the modification of new lines, delete, add, etc.
First of all, the database problem.
For the records of these table rows that need to be added dynamically, we need to put them back in a list, is to do a separate table, such as the above mentioned work experience problems of course, employees should have an employee table, record name, age, ID card, education and other information, for work experience this piece, you need to do a separate work experience table And then according to the foreign keys, build their relationship, which is the database aspect of the design
Let's look at how to implement these in ASP
Add Action:
Code:

<!--#include file= "inc/conn.asp"--> <% If Request ("TJ") = "Add" then set Rs=server. CreateObject ("ADODB.") RecordSet ") strsql=" SELECT * Tb_person "Rs.Open strsql,conn,2,3 for I =1 to request (" username "). Count Rs.addnew ( ) RS ("UserName") =request ("UserName") (i) RS ("Sex") =request ("Usersex") (i) RS ("Age") =request ("Userage") (i) RS ("Aihao" ) =request ("Userlove") (i) Rs.update next End If%>  

Note: Here we can get the array value of the username column directly from the request ("username"), through debugging we can see that the first (index 0) value is "," so when we get the value we want to start reading from index 1, then add the action

Modify:
read the data to a table based on the foreign key loop first, code:

<form name=frmuserinfo action= "user_list1.asp" method=post> <br> <table border=1 width= "720" > <tr > <td> name </td> <td> sex </td> <td> age </td> <td> Love </td> <td> Delete</td> </tr> <% set Rs=server. CreateObject ("ADODB.") RecordSet ") strsql=" select * from Tb_person "Rs.Open strsql,conn,2,3 does not rs.eof%> <tr ID=TRUSERINFO1&G 
T 
&LT;TD id=tduserinfo1><input id=username1 name=username1 value= "<%=rs (" UserName ")%>" ></td> &LT;TD id=tduserinfo1><input id=usersex1 name=usersex1 value= "<%=rs (" Age ")%>" ></td> <td id= Tduserinfo1><input id=userage1 name=userage value= "<%=rs (" Sex ")%>" ></td> <td id=tduserinfo1 ><input id=userlove1 name=userlove value= "<%=rs (" Aihao ")%>" ></td> <td id=tduserinfo> < Input type= "submit" value= "Delete"/> <!----></td> </tr> <% rs.movenext loop%> <table id=tabuserinfo border=1 wi Dth= "720" > <tr> <td></td> <td></td> <td></td> <td></td> ;td></td> </tr> <tr style= "Display:none" id=truserinfo> <td id=tduserinfo><input id= Username Name=username ></td> <td id=tduserinfo><input id=usersex name=usersex></td> < TD Id=tduserinfo><input Id=userage name=userage></td> &LT;TD id=tduserinfo><input id=userlove name=userlove></td> <td id=tduserinfo>  </td> </tr> <tr> <td> <input type=button value=" Add "  onclick= "AddRow (document.all.tabuserinfo,null,1,1)" ></td> </tr> </table>

My idea is to separate the previously added records from the rows that are now being added, if we want to delete the record rows, or modify the record rows to do so
First delete so record, and then add the previous record and the current record, as for the code and add the idea is the same, but this is divided into two add to complete the specific code, we can try their own

Here's a look at how to implement in asp.net
If you use ASP.net's own control encapsulation mode, it is difficult to implement, so here we can use the above mentioned ASP's idea to complete
JS and HTML are the same, not the same is the background code:
Add it, for example.

 protected void Button1_Click (object sender, EventArgs e)
 {
  
  string username = request["username"]. ToString ();
  string[] NameList = username. Split (', ');
  string[] Sexlist = username. Split (', ');
  string[] Agelist = username. Split (', ');
  string[] Lovelist = username. Split (', ');
  for (int i = 1; i < NameList. Length; i++)
  {
   //Get the value passed over, manipulate
   string name = Namelist[i]. ToString ();
   String usersex = Sexlist[i]. ToString ();
   String userage = Agelist[i]. ToString ();
   String userlove = Agelist[i]. ToString ();
   Action on it, such as adding modifications, and so on
  }
  
 }

Here we use request["username"] to get the value, the page is using HTML tags, not server-side controls, do not use the. Value or text to implement, so you can use the idea of ASP or JSP to deal with.
Similarly, modifications and deletions can also be handled using the idea of an ASP or JSP.
or from submission to processing completely using JSP and ASP's idea, create a HttpHandler, the data submitted to the surface processing, this can also, but the first method is better, so easy to get the value and processing, do not need to convert anything.

Specific problems, such as the need to default to have a row, this time need to add a work record in the Employee table field, this line of records are added to the employee table, and then edit the deletion need to edit first, and then make two additions.
General implementation of the idea of adding data row is like this, what is the problem, I hope that we give correct ....