Dynamic Add delete JSP page Line Input table

I've written two posts about adding nodes to HTML pages and deleting nodes. Today by chance to see a netizen asked the JSP page dynamically to add rows to the table, delete the line, it happened to be more busy, wrote a bit, recorded, hoping to help the needs of friends.

Initial version

In the above code, first constructs a table in the body, in order to facilitate the subsequent operation, we have added the THEAD and the Tbody label to the table, the THEAD tag is the table header, the Tbody label is the table body. 
The table in the example has a total of three columns, the first column is name, the second column is last name, and the third is the Action column.
The Action column contains two actions, one for adding rows to the table and one for deleting the current row. adding rows and deleting rows is tied to two buttons, triggering the corresponding add row/delete Row action when the button is clicked.

To Add a row method

function Add () {var trobj = document.createelement ("tr"); trobj.id = new Date (). GetTime (); trobj.innerhtml = "<td>& Lt;input name= ' firstName '/></td><td><input name= ' lastName '/></td><td><input Type= ' button ' value= ' Add ' onclick= ' Add () ' > <input type= ' button ' value= ' del ' onclick= ' del (this) ' ></td> ";d Ocument.getelementbyid (" TB "). AppendChild (trobj);}


 
 

  
  
 The first line, creating a TR element, is creating a table row. 
   
The second line, trobj.id = new Date (). GetTime (); Add the id attribute to the row and assign a value to the attribute, taking the current system's number of milliseconds, which is mostly required for deletion.
 
   
Line three, trobj.innerhtml = "<td><input name= ' firstName '/></td><td><input name= ' lastName '/ ></td><td><input type= ' button ' value= ' Add ' onclick= ' Add () ' >
 
   
<input type= ' button ' value= ' del ' onclick= ' del (This) ' ></td> '; Assigns a value to a table row, using the Innerhtmml property, to set the contents of the HTML code between the <tr> tag and the </tr> tag, that is, the line content to be added.
 
   
Line four, document.getElementById ("TB"). AppendChild (Trobj); Adds the created table row to the table body.
 
  
 
 

Delete Row Method

Function del (obj) {var trId = Obj.parentnode.parentnode.id;var Trobj = document.getElementById (trId); document.getElementById ("TB"). RemoveChild (trobj);}


 
 

  
  A parameter is passed in the Delete method, and in the 
  
  
 add Row method we can see that the This parameter is passed in the Delete method Del, which in the page code refers to the current HTML element, the <input > domain where this is located.  
   
The first line, var trId = obj.parentNode.parentNode.id; Gets the ID of the parent node of the current element's parent node, which is the ID of the row to be deleted.
 
   
The second line, var trobj = document.getElementById (trId); Gets the row element to delete.
 
   
The third line, document.getElementById ("TB"). RemoveChild (Trobj); Delete the row in the body of the table.
 
  
 
 

Flaws

The code above basically implements the ability to dynamically add rows and delete rows to a table, but the code is flawed, with the main two points:
1 table width changes before and after adding rows
Increase before line
After adding rows
The table column becomes wider after the row is added
2 Browser default open page garbled in Chinese
The page encoding format needs to be modified before it can be displayed correctly by using the setup encoding described previously.




Dynamic Add delete JSP page Line Input table