Today, let's share the article "front-end html analysis - Analysis of dom operation table". The article introduces it in detail according to the example code. It may have a certain reference space and use value for everyone's programming road. Friends in need will learn from Yunnan Qianlong Mark next.
1, To create a table using HTML Tags:
The copy code is as follows:
<tableborder="1"width="300"> <caption>Personnel table</caption> <thead> <tr> <th>full name</th> <th>Gender</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>Zhang San</td> <td>male</td> <td>20</td> </tr> <tr> <td>Li Si</td> <td>female</td> <td>22</td> </tr> </tbody> <tfoot> <tr> <tdcolspan="3">total: N</td> </tr> </tfoot> </table>
thead, tfoot and caption tags can only have one tbody, tr, td and th tag in a table. There can be N tags in a table
2, Creating tables using DOM
Tag is one of the most complex structures in HTML. We can create it through DOM, or operate it through HTML DOM. (HTML DOM provides a more convenient and fast way to operate HTML)The copy code is as follows:
<script>
window.onload=function(){
vartable=document.createElement("table");
//Add attributes to the table
table.width=300;//You can also use this method: table setAttribute('width',300)
table.border=1;</p> <p>//Create the title of the table
varcaption=document.createElement("caption");
table.appendChild(caption);</p> <p>//Add content to the title of the table
//caption.innerHTML = "personnel table"// Non W3c standard method
varcaptionText=document.createTextNode("Personnel table");
caption.appendChild(captionText);</p> <p>
//The first row of the created table is a header row
varthead=document.createElement("thead");
table.appendChild(thead);</p> <p>vartr=document.createElement("tr");
/* http://www.qlyl1688.com */
thead.appendChild(tr);</p> <p>//column
varth1=document.createElement("th");
tr.appendChild(th1);
th1.innerHTML="data";
varth2=document.createElement("th");
tr.appendChild(th2);
th2.innerHTML="data";</p> <p>document.body.appendChild(table);
};
</script>
3, Use DOM to obtain table data (it will be annoying to operate tables with DOM)
The copy code is as follows:
window.οnlοad=function(){
vartable=document.getElementsByTagName("table")[0];
alert(table.children[0].innerHTML);
};
4, Use HTML DOM to obtain table data (convenient, simple and clear).
Because the tables are complicated and have many levels, it will be very difficult to use the DOM learned before just to obtain an element, so using HTML DOM will be much clearer.
The copy code is as follows:
window.onload=function(){
//Use HTML DOM to get table elements
vartable=document.getElementsByTagName('table')[0];//Get table reference
//Press HTMLDOM to get the < caption > of the table
alert(table.caption.innerHTML);//Get the content of caption
//table.caption.innerHTML = "student form"// You can also set values
};
The copy code is as follows:
window.onload=function(){
//Use HTML DOM to get table elements
vartable=document.getElementsByTagName('table')[0];//Get table reference
//Press HTMLDOM to get the header and footer < thead >, < tFoot >
alert(table.tHead);//Get header
alert(table.tFoot);//Get the footer < / P > < p > / / get the table body < tbody > by HTMLDOM
alert(table.tBodies);//Get the set of table body
};
In a table<thead>and<tfoot>Is the only one. There can only be one. and<tbody>It is not unique. There can be more than one, which leads to the final return<thead>and<tfoot>Is an element reference, and<tbody>Returns a collection of elements.
The copy code is as follows:
window.οnlοad=function(){
//Use HTML DOM to get table elements
vartable=document.getElementsByTagName(‘table’)[0];// Get table reference
//Press HTML DOM to get the number of rows in the table
alert(table.rows.length);// Get the collection of rows, quantity
//Press HTML DOM to get the number of rows in the table body
alert(table.tBodies[0].rows.length);// Gets the collection of the number of rows of the principal, and the number of rows
};
The copy code is as follows:
window.οnlοad=function(){
//Use HTML DOM to get table elements
vartable=document.getElementsByTagName(‘table’)[0];// Get table reference
//Press HTMLDOM to get the number of cells (tr) in the first row of the table body
alert(table.tBodies[0].rows[0].cells.length);// Gets the number of cells in the first row
};
The copy code is as follows:
window.οnlοad=function(){
//Use HTML DOM to get table elements
vartable=document.getElementsByTagName(‘table’)[0];// Get table reference
//Press HTMLDOM to get the contents of the first cell in the first row of the table body (td)
alert(table.tBodies[0].rows[0].cells[0].innerHTML);// Gets the contents of the first cell in the first row
};
The copy code is as follows:
<script>
window.onload=function(){
//Use HTML DOM to get table elements
vartable=document.getElementsByTagName(‘table’)[0];// Get the table reference < / P > < p > / / delete the title, header, footer, row and cell by HTMLDOM
//table.deleteCaption();// Delete title
//table.deleteTHead();// delete
//table.tBodies[0].deleteRow(0);// Delete a row
//table.tBodies[0].rows[0].deleteCell(0);// Delete a cell
//table.tBodies[0].rows[0].deleteCell(1);// Deleting the contents of a cell is equivalent to deleting a cell, and the following hope will be added
};
5, Creating tables with HTML DOM
The copy code is as follows:
window.onload=function(){
//Create a table by HTML DOM
vartable=document.createElement('table');
table.border=1;
table.width=300;</p> <p>table.createCaption().innerHTML='Personnel table';</p> <p>//table.createTHead();
//table.tHead.insertRow(0);
varthead=table.createTHead();//This method returns a reference
vartr=thead.insertRow(0);//This method returns a reference < / P > < p > vartd = tr.insertcell (0);
//td.appendChild(document.createTextNode('data ')// As a way to add data, you can also use the following methods
td.innerHTML="data";
vartd2=tr.insertCell(1);
//td2.appendChild(document.createTextNode('data2 '));
td2.innerHTML="Data 2";</p> <p>document.body.appendChild(table);
}; There is no specific method for < Table >, < tbody >, < th > when creating a table. You need to use document to create it. You can also simulate existing methods and write specific functions, such as insertTH(). The above is all the content introduced by Yunnan Qianlong Mark. I hope it will be helpful to you. If you have any questions, please leave a message at the script home. If you think this article is helpful to you, welcome to reprint it. Please indicate the source, thank you!