Example of dom operation form (dom creation form)_HTML/Xhtml_Web page production-HTML Tutorial-php.cn

1. Create a table using HTML tags:

Copy code

The code is as follows:

Personnel List

Name
< ;th>Gender
Age

< tr>
Zhang San
Male
20

李思
Female
22
< /tr>

Total: N

thead, tfoot, and caption tags can only have one tbody, tr, td, and th tag in a table. There can be N in a table

2. Use DOM to create tables

The

tag is the most complex structure in HTML. We can create and generate it through DOM, or operate it through HTMLDOM. (HTMLDOM provides a more convenient and faster way to operate HTML)

Copy code

The code is as follows:

3. Use DOM to obtain table data (using DOM to operate tables will be very annoying)

Copy the code

The code is as follows :

window.onload=function(){
vartable=document.getElementsByTagName("table")[0];
alert(table.children[0].innerHTML);
};

4. Use HTMLDOM to obtain table data (convenient, simple and clear).

Because the table is complex and has many levels, it would be very uncomfortable to use the DOM you learned before just to get a certain element, so it will be much clearer using HTMLDOM.

Copy code

The code is as follows:

window.onload=function(){
//Use HTMLDOM to get the table elements
vartable=document.getElementsByTagName('table')[0];//Get the table reference
//Press HTMLDOM to get the table's

,
alert(table.tHead);//Get the table header
alert(table.tFoot);//Get the table foot< ;/p>

//Press HTMLDOM to get the table body

alert(table.tBodies);//Get the collection of table bodies
};

and are unique in a table, and there can only be one. And is not the only one but can have multiple ones, so the and finally returned are element references, while returns a collection of elements.

Copy code

The code is as follows:

window.onload=function(){
//Use HTMLDOM to get table elements
vartable=document.getElementsByTagName('table')[0];//Get table reference
//Press HTMLDOM to get the number of rows in the table
alert( table.rows.length);//Get the collection of row numbers, quantity

//Press HTMLDOM to get the number of rows in the body of the table
alert(table.tBodies[0].rows.length);//Get the collection of rows in the body, quantity
};

Copy code

The code is as follows:

window.onload= function(){
//Use HTMLDOM to get table elements
vartable=document.getElementsByTagName('table')[0];//Get table reference

//Press HTMLDOM to get the number of cells in the first row of the table body (tr)
alert(table.tBodies[0].rows[0].cells.length);//Get the first The number of row cells
};

Copy the code

The code is as follows:

window.onload=function(){
//Use HTMLDOM to get table elements
vartable=document.getElementsByTagName('table')[0];//Get table reference

//Press HTMLDOM to get the content of the first cell in the first row of the table body (td)
alert(table.tBodies[0].rows[0].cells[0].innerHTML) ;//Get the content of the first cell in the first row
};

Copy code

The code is as follows:

5. HTMLDOM creation table

Copy code

The code is as follows:

window.onload=function(){
//Create a table according to HTMLDOM
vartable=document.createElement('table');
table.border=1;
table.width=300;

table.createCaption().innerHTML='Personnel table';

//table.createTHead();
//table.tHead.insertRow(0);
varthead=table.createTHead();//This method returns a reference
vartr=thead .insertRow(0);//This method returns a reference

vartd=tr.insertCell(0);
//td.appendChild(document.createTextNode('data'));//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="data2 ";

document.body.appendChild(table);
};When creating a table, there is no specific method for

, ,

and you need to use document to create it. You can also simulate existing methods and write specific functions, such as insertTH() and the like.

Related labels：

dom操作表格 dom创建表格

source：php.cn

Previous article：Call js function or js variable in img src="" of html to dynamically specify the image path_HTML/Xhtml_web page production Next article：Set the default text of the search box and the default text disappears when the mouse is clicked_HTML/Xhtml_Web page production

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn