DOM operation table example (DOM creates table)

Time:2020-3-22

1、 To create a table using HTML Tags:

Copy code

The code is as follows:

<tableborder=”1″width=”300″>
< caption > personnel table < / caption >
<thead>
<tr>
< th > 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>

The ad, tFoot and caption labels can only have one tbody, TR, TD and th labels in one table. There can be n labels in one table

2、 Creating tables using DOM

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

Copy code

The code is as follows:

<script>
window.onload=function(){
vartable=document.createElement(“table”);
//Add attributes to a table
Table. Width = 300; / / you can also use this method: table. SetAttribute (‘width ‘, 300)
table.border=1;</p>
varcaption=document.createElement(“caption”);
table.appendChild(caption);</p>
//Caption. InnerHTML = “personnel table”; / / non W3C standard method
Varcaptiontext = document.createtextnode (“people table”);
caption.appendChild(captionText);</p>
<p>
//Create the first row of the table, which is a header row
varthead=document.createElement(“thead”);
table.appendChild(thead);</p>
<p>vartr=document.createElement(“tr”);
thead.appendChild(tr);</p>
varth1=document.createElement(“th”);
tr.appendChild(th1);
Th1. InnerHTML = “data”;
varth2=document.createElement(“th”);
tr.appendChild(th2);
Th2. InnerHTML = “data”</p>
};
</script>

3、 Using DOM to get table data (it’s annoying to use DOM to manipulate tables)

Copy code

The code is as follows:

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

4、 Use HTML DOM to get table data (convenient, simple, clear).

Because of the complexity of tables and many levels, it’s very hard to use the DOM you learned before just to get an element, so it’s much clearer to use HTML DOM.

Copy code

The code is as follows:

window.onload=function(){
//Using HTML DOM to get table elements
Vartable = document. GetElementsByTagName (‘table ‘) [0]; / / get table reference
//Press HTML DOM to get the < caption >
Alert (table. Caption. InnerHTML); / / get the content of caption
//Table. Caption. InnerHTML = “student table”; / / you can also set values
};
Copy code

The code is as follows:

window.onload=function(){
//Using HTML DOM to get table elements
Vartable = document. GetElementsByTagName (‘table ‘) [0]; / / get table reference
//Press HTML DOM to get the header and footer < thead >, < tFoot >
Alert (table. Thead); / / get the header
Alert (table. TFoot); / / get the footer</p>
Alert (table. Tbodies); / / get the table body set
};

In a table, < thead > and < tFoot > are unique. There can only be one. But < tbody > is not the only one that can have more than one, so the last returned < thead > and < tFoot > are element references, while < tbody > returns element sets.

Copy code

The code is as follows:

window.onload=function(){
//Using HTML DOM to get table elements
Vartable = document. GetElementsByTagName (‘table ‘) [0]; / / get table reference
//Get the number of table rows by HTML DOM
Alert (table. Rows. Length); / / get the number of rows</p>
Alert (table. Tbodies [0]. Rows. Length); / / get the set and quantity of rows of the principal
};
Copy code

The code is as follows:

window.onload=function(){
//Using HTML DOM to get table elements
Vartable = document. GetElementsByTagName (‘table ‘) [0]; / / get table reference</p>
Alert (table. Tbodies [0]. Rows [0]. Cells. Length); / / get the number of cells in the first row
};
Copy code

The code is as follows:

window.onload=function(){
//Using HTML DOM to get table elements
Vartable = document. GetElementsByTagName (‘table ‘) [0]; / / get table reference</p>
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:

<script>
window.onload=function(){
//Using HTML DOM to get table elements
Vartable = document. GetElementsByTagName (‘table ‘) [0]; / / get table reference</p>
//Table. Deletecaption(); / / delete caption
//Table. Deletethread(); / / delete < thead >
//Table. Tbodies [0]. Deleterow (0); / / delete a line of < tr >
//Table. Tbodies [0]. Rows [0]. Deletecell (0); / / delete < td > a cell
//Table. Tbodies [0]. Rows [0]. Deletecell (1); / / deleting the contents of a cell is equivalent to deleting a cell. The following hope will be filled in
};
</script>

5、 HTML DOM creating tables

Copy code

The code is as follows:

window.onload=function(){
//Create a table by HTML DOM
vartable=document.createElement(‘table’);
table.border=1;
table.width=300;</p>
//table.tHead.insertRow(0);
Varthead = table. Createhead(); / / this method returns a reference
Vartr = thead. Insertrow (0); / / this method returns a reference</p>
//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″</p>
}When creating a table, < Table >, < tbody >, < th >, there is no specific method, so you need to use document to create it. You can also simulate existing methods to write specific functions, such as insertth().

Recommended Today

Query SAP multiple database table sizes

Query SAP multiple database table sizes https://www.cnblogs.com/ken-yu/p/12973009.html Item code db02 Here are two approaches, In the first graphical interface, the results of the query data table are displayed in MB, and only one table can be queried at a time. SPACE—Segments—Detailed Analysis—Detailed Analysis  In the pop-up window segment / object, enter the name of the […]