0417 JS node operation table (add, delete)

node creation and append

Node creation

Element node: document.createelement (Tag tag name );

Text node: document.createTextNode ( text content );

Property settings: Node.setattribute ( name, value );

　　Node Append:

Parent node. appendchild ( child node );

Parent node. insertbefore (Newnode,oldnode); NewNode put it in front of the OldNode.

Parent node. replacechild (Newnode,oldnode); NewNode Replace to oldnode node

Node copy operation

The node being copied. CloneNode (true/false);

true: deep replication (both itself and the inner child nodes are duplicated)

False: Shallow copy (includes property copy itself)

<div id= "Apple" >hello</div>

Node Deletion

　　node. remove ();

Parent node. removechild ( child node );

Node action table (add, delete)

1 <!--HTML code Section -2 <TableID= "Table1"Border= "1"style= "border-spacing:0">3     <TR>4         <th>Number</th>5         <th>Grade</th>6         <th>Name</th>7         <th>Gender</th>8         <th>Operation</th>9     </TR>Ten </Table> One /*JS Code section * / A window.onload = function () { - //define an array with data - var usearr = [ the [1, "Wang Paoli", "male", "ten"], - [2, "Shang", "male", "one-man"], - [3, "Li Qingkun", "Male", "a"), - [4, "Chen Peng", "male", " $"] +     ]; - //Add data to a table + xstable (Usearr); A } at //To display the contents of the array in the table - function xstable (uarr) { - //Find the table you want to manipulate - var TableX = document.getElementById (' table1 '); - Console.log (TableX); - //Cycle the length of the array to determine the TR infor (var i = 0; i<Uarr. length; i++) { - //once per cycle, add a TR label to var trobj= document.createelement (' tr '); +         //Loop the length of each element of the array once and determine the TD - For (Var j= 0;J < Uarr[i].length; J + +) { the //once per cycle, add a TD label * var tdobj= document.createelement (' TD '); $             //Assign a value to TDPanax Notoginseng tdobj.innerhtml= Uarr[i][j]; -             //Put TD into the corresponding TR the Trobj.appendchild (tdobj); +         } A //Add data that is not in the array (modify, delete) the var tdobj= document.createelement (' TD '); + //will show an empty button more - //Tdobj.innerhtml= ' <buttonID= "a">Modify<Button/>'; $ //Trobj.appendchild (tdobj); $ //Tablex.appendchild (trobj); - //Add a modifier button to the TD; - var buttobj = document.createelement (' button '); the buttobj.innerhtml = ' modify '; - //Add butt into TDWuyi Tdobj.appendchild (buttobj); the //Add a Delete button to TD - var buttobj = document.createelement (' button '); Wu buttobj.innerhtml = ' delete '; - //Add Click to delete event: Need to pass value when set About //buttobj.setattribute (' OnClick ', ' deltr (This) '); $ //You can use this directly with add - buttobj.addeventlistener (' click ', deltr); - //Add butt into TD - Tdobj.appendchild (buttobj); A //Add TD into TR + Trobj.appendchild (tdobj); the //Add TR into table - Tablex.appendchild (trobj); $     } the } the //Add a row the function Addtr () { the //Find the table you want to manipulate - var table2 = document.getElementById (' table1 '); in //Add a row the var trobj = document.createelement (' tr '); the //through the loop for TR add enough TD Aboutfor (var i = 0; i<5; i++) { the //Add a TD the var tdobj= document.createelement (' TD '); the         //Add content to TD + tdobj.innerhtml= ''; - //Add TD into TR the Trobj.appendchild (tdobj);Bayi     } the //Add TR into table the Table2.appendchild (trobj); - } - //Delete Bank the function deltr () { the //Remove the upper-level tr of the Upper TD of this button the This.parentElement.parentElement.remove (); the }

JS node operation table (add, delete)--code example

0417 JS node operation table (add, delete)