I do n’t say much nonsense, I will post code directly. The specific code is shown below:
<html> <head> <Title> Table </Title> </Head> <body> <Table Border = 1> <thead> <TD> FIRST NAME </td> Last Name </td > <TD> </td> </tr> <thead> <tbody ID = tb> <l ID = 1st> </td> <td> Three </td> <td> <input type = Button value = ADD Onclick = ADD ()> <input Type = Button Value = Del Onclick = Del (this)> </TD> </TBODY> </Body> </html> </html> </html> script> function add () {var trobj = document.createElement (tr); trobj.id = new date (). Gettime (); 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>; Document.GetelementByid (TB) .appndchild (Trobj);} Function Del (OBJ) {var trum = obj.parentnode.parentnode .id; VAR TROBJ = DOCUMENT. GetelementByid (TRID); Document.GetelementByid (TB). Removechild (trObj);} </script>In the above code, a table is first constructed in the body. In order to facilitate the follow -up operation, we add the THEAD and TBODY tags to Table. Thead label marked the header header.
There are three columns in the example, the first column of FIRST NAME, the second column Last Name, and the third column as the operation column.
The operation column contains two operations, one is to add a line to the form, and the other is to delete the current line. The operations of the addition and deletion lines are tied to two buttons, and when the button is clicked, the corresponding add/ delete row operation is triggered.
Method of adding Function add () {var trobj = document.createElement (tr); trobj.id = new date (). Gettime (); Trobj.Innerhtml = <input name = 'firstName'/> </t. d> <TD > <input name = 'Lastname'/> </td> <td> <input type = 'Button' Value = 'Add' Onclick = 'Add ()'> <input Type = 'Value =' Del ' onclick = 'Del (this)'> </td>; Document.GetelementByid (tb) .appndchild (trobj);}The first line is to create a TR element, that is, to create a table line.
In the second line, trObj.id = new Date().getTime(); add ID attribute to the change and assign the attribute, take the milliseconds of the current system, this is mainly needed when deleted.
Third line, 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> ; assign a value to the form, set the <tml code between the <ter> tag and </tr> label through the InnerHTMML attribute. Content, which is the content to be added.
The fourth line, document.getElementById(tb).appendChild(trObj); add the created form row to the table subject.
Function Del (obj) {var trum = obj.parentnode.parentnode.id; var trobj = document.GetelementByid (trum); (trobj);}A parameter is conveyed in the deletion method. In the addition method, we can see that the This parameter is passed to the delete method DEL. The this in the page code refers to the current HTML element, that is, the <input> domain where this is located.
In the first line, var trId = obj.parentNode.parentNode.id ; Get the ID of the parent node of the parent node of the current element, that is, the ID of the row to delete.
In the second line, var trObj = document.getElementById(trId); get the element of lines to be deleted.
In the third line, document.getElementById(tb).removeChild(trObj); delete the row in the table subject.
The above code basically realizes the function of dynamic giving meter increase and deletion lines, but there are flaws in the code. There are two main points:
1 Table 1 before and after the increase, the width of the table changes
Increase
Increase
After the increase, the form of the form becomes wider
2 The browser's default page in Chinese appears garbled in Chinese
You need to set the character encoding to modify the page encoding format before it can be displayed normally