JS node operation (table adds rows and cells to JS and has a delete key)

1 <DivID= "Div">2     <TableID= "tab">3         <TR>4             <th>Number</th>5             <th>Name</th>6             <th>Gender</th>7             <th>Age</th>8         </TR>9     </Table>Ten </Div>

The HTML content table adds rows and cells to JS and has a delete key

Window.onload =function(){    vardata = [        [1, "Wang Paoli", "Male", "10"],        [2, "Shang", "Male", "11"],        [3, "Li Qingkun", "Male", "12"],        [4, "Chen Peng", "Male", "33"]    ]; //initializing data to output data from the database to the pageinitdata (data); //Add an event to add a row    varAddbtndom = document.getElementById (' btn ')); Addbtndom.addeventlistener (' Click ', addelement);};//run add a line functionfunctionaddelement () {//Find Table    vartab = document.getElementById (' tab ');//add a row to add a node    varTrdom = document.createelement (' tr ')); //There are 5 cells in total, so loop five times .     for(vari=0; i<5; i++){//add one cell at a time per loop        varTddom = document.createelement (' TD ');//the contents of the cell are emptytddom.innerhtml = "";//Put TD in TRTrdom.appendchild (tddom); }//Put the TR in the table.Tab.appendchild (trdom);}/*function: Used to put data in the database on the page display data is a two-dimensional array ["number, name, gender, age",...] Parameter: no return: None*///function to run after page load is completedfunctionInitData (dd) {//Find Table    vartab = document.getElementById (' tab '); //How many tr are there? Dd.length     for(vari=0; i<dd.length; i++){//Append one line of TR to table at a time per loop        varTrdom = document.createelement (' tr ')); //adding a flag to TR each time a TR is added is used when the delete is run belowTrdom.setattribute (' num ', i); //How many TD are there? Dd[i].length         for(varj=0; j<dd[i].length; J + +){//Add one TD per Loop            varTddom = document.createelement (' TD ');//outputs the added TD to the page dd[i][j] = The position of the subscript I of a one-dimensional array of two-dimensional arrays in the DD arraytddom.innerhtml =Dd[i][j];//add TD to TRTrdom.appendchild (tddom); }//add one TD at a time in cycle: Modify the cell where the deletion is located        varTddom = document.createelement (' TD ');//Add a button to a cell each time you add a cell        varBtnmoddom = document.createelement (' button ');//the contents of the button are modifiedBtnmoddom.innerhtml= ' Modify ';//the color of the button is redBtnmoddom.style.color= ' Red ';//Add the button to TDTddom.appendchild (btnmoddom);//Add a button to a cell each time you add a cell        varBtnmoddom = document.createelement (' button ');//the contents of the button are deletedBtnmoddom.innerhtml= ' Delete ';//Add a Delete event to a deleteBtnmoddom.setattribute (' OnClick ', ' delthis (This) ');//and add a tag to this button to delete when you can useBtnmoddom.setattribute (' num ', i);//btnmoddom.addeventlistener (' click ', show);//Append the button to the cell each time the loop isTddom.appendchild (btnmoddom);//add TD to TRTrdom.appendchild (tddom); //Append tr to tableTab.appendchild (trdom); }}//Run Delthis Delete eventfunctiondelthis (obj) {//find the NUM value of this element passed over//obj.getattribute (' num ');//Find all the rows, tr//var Trarr = document.getelementsbytagname (' tr ');//cycle all the TR//For (var i=0; i<trarr.length; i++) {//If you get the num of this element and the value of the loop is equal to Num//if (trarr[i].getattribute (' num ') = = Obj.getattribute (' num ')) {//just delete this line//Trarr[i].remove ();//End Loop//Break ;//        }//Find the parent label of the element TD's parent label TR then deleteConsole.log (Obj.parentElement.parentElement.parentElement.remove ());}

JS Content

One or six ways to insert nodes in JS

InnerHTML, outerHTML, AppendChild, InsertBefore, insertAdjacentHTML, applyelement

Introduce appendchild today.

1. What is a node

All content in an HTML document is a node:

1. The entire document is a document node.

2. Each HTML element is an element node.

3.text within an HTML element is a text node.

4. Each HTML attribute is an attribute node.

5. Each comment is a comment node.

First, create nodes, append nodes

1.CreateElementCreates a node of an element.
2.AppendChild appends a node.
3.createtextnode Create a text node.
Second, delete, remove node
1. RemoveChild (node) deletes a node that is used to remove a parameter (node). It returns the removed node, the removed node is still in the document, but the document does not already have its position.

Third, replace the node
1,ReplaceChild (inserted node, replaced node), to replace the node, accept two parameters, the first parameter is the node to be inserted, the second is the node to be replaced. Returned is the node that was replaced.

Iv. Finding nodes
1. ChildNodes contains child nodes of text nodes and ELEMENT nodes.

JS node operation (table adds rows and cells to JS and has a delete key)