<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title> Control CloneNode () method use </title> <script type= "Text/javascript" ><!--var i = 1; function AddRow () {var isinsert = true; var tableobject; Tableobject = document.getElementById (' clonenodeshow '); If the value is not filled, then the isneed is empty! for (var j = 0; J < tableobject.getelementsbytagname ("input"). Length; J + + {var inputs = Tableobject.getelementsbytag Name ("Input") [j]; if (Inputs.type = = "Text" && Inputs.value = = "") {isneed = false; }///If the value is already populated, create tr,td if (Isinsert = = true) {//Create a row var copytr = Tableobject.insertrow () from the table; Create cell var td0 = Copytr.insertcell (); var TD1 = Copytr.insertcell (); var td2 = Copytr.insertcell (); var td3 = Copytr.insertcell (); The value of the first cell is: ++i. Note I is global variable td0.innerhtml = (++i) + '. '; The TD1 value is: td1.innerhtml = "<inputType= ' text ' name= ' username '/> '; var newselect = document.getElementById ("Sextype") with CloneNode permanent clones (true). CloneNode (True); Newselect.id = "Sextype" + i; The value of TD2 is Newselect td2.appendchild (newselect); td3.innerhtml = ' <input type= ' text "name=" Age "onchange=" addrow () "/>"; }//--></script> </pead> <body> <table id= "Clonenodeshow" border= "1" bordercolor= "#000000" > <tr> <th></th><th> name </th><th> sex </th><th> age </th> </ tr> <tr> <td>1.</td> <td><input type= "text" name= "username"/></td> <td> <select name= "Sextype" id= "Sextype" > <option value= "%" > Please select Gender </option> <option value= "0" > Male </option> <option value= "1" > Women </option> </select> </td> <td><input type= "text" Name= "Age" onchange= "AddRow ()"/></td> </tr> </table> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
