Dom operation table example (dom creation table) _ HTML/Xhtml _ webpage Creation

This article mainly introduces the dom operation table example (dom creation table). If you need it, refer to the following section and use HTML tags to create a table:

The Code is as follows:

Personnel table


Name
Gender
Age




Zhang San
Male
20


Li Si
Female
22




Total: N

Thead, tfoot, and caption tags can have only one tbody, tr, td, and th tags in a table.

Ii. Use DOM to create a table

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;

// Create the table title
Varcaption = document. createElement ("caption ");
Table. appendChild (caption );

// Add content to the table title
// Caption. innerHTML = "personnel table"; // non-W3c Standard Method
VarcaptionText = document. createTextNode ("personnel table ");
Caption. appendChild (captionText );

// Create the first row of the table as a title line
Varthead = document. createElement ("thead ");
Table. appendChild (thead );

Vartr = document. createElement ("tr ");
Thead. appendChild (tr );

// Column
Varth1 = document. createElement ("th ");
Tr. appendChild (th1 );
Th1.innerHTML = "data ";
Var2= document. createElement ("th ");
Tr. appendChild (2nd );
Th2.innerHTML = "data ";

Document. body. appendChild (table );
};
Script

3. Use DOM to retrieve table data (it is annoying to use DOM to operate tables)

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 tables are complex and have many layers, it is difficult to use the DOM that we learned before to obtain an element, so using HTMLDOM is much clearer.

Window. onload = function (){
// Use HTMLDOM to obtain Table Elements
Vartable = document. getElementsByTagName ('table') [0]; // get table reference
// Use HTMLDOM to obtain the table

// Use HTMLDOM to obtain the table body

In a table

Window. onload = function (){
// Use HTMLDOM to obtain Table Elements
Vartable = document. getElementsByTagName ('table') [0]; // get table reference
// Use HTMLDOM to obtain the number of rows in the table
Alert (table. rows. length); // gets the set of rows, quantity

// Use HTMLDOM to obtain the number of rows in the table body
Alert (table. tBodies [0]. rows. length); // gets the set of the number of rows of the subject.
};

Window. onload = function (){
// Use HTMLDOM to obtain Table Elements
Vartable = document. getElementsByTagName ('table') [0]; // get table reference

// Use HTMLDOM to obtain the number of cells in the first row of the table body (tr)
Alert (table. tBodies [0]. rows [0]. cells. length); // obtain the number of cells in the first row
};

Window. onload = function (){
// Use HTMLDOM to obtain Table Elements
Vartable = document. getElementsByTagName ('table') [0]; // get table reference

// Use HTMLDOM to obtain the content of the first cell in the first row of the table body (td)
Alert (table. tBodies [0]. rows [0]. cells [0]. innerHTML); // obtain the content of the first cell in the first row
};

Script
Window. onload = function (){
// Use HTMLDOM to obtain Table Elements
Vartable = document. getElementsByTagName ('table') [0]; // get table reference

// Use HTMLDOM to delete titles, headers, table tails, rows, and cells
// Table. deleteCaption (); // Delete the title
// Table. deleteTHead (); // Delete

A tag is the most complex structure in HTML. We can use DOM to create and generate it, or HTMLDOM to operate on it. (HTMLDOM provides a more convenient and convenient way to operate HTML) The Code is as follows: The Code is as follows: The Code is as follows: , Alert (table. tHead); // get the headerAlert (table. tFoot); // get the end of the table Alert (table. tBodies); // gets the set of table bodies}; And It is unique and can only have one. While Not the only one can have multiple, resulting in the final return And Is element reference, while Returns an element set. The Code is as follows: The Code is as follows: The Code is as follows: The Code is as follows: // Table. tBodies [0]. deleteRow (0); // Delete One row// Table. tBodies [0]. rows [0]. deleteCell (0); // Delete

Alert (table. caption. innerHTML); // obtain the caption content
// Table. caption. innerHTML = "Student table"; // You can also set the value.
};

The Code is as follows:

Window. onload = function (){
// Use HTMLDOM to obtain Table Elements
Vartable = document. getElementsByTagName ('table') [0]; // get table reference
// Follow HTMLDOM to get the end of the table Header

One Cell // Table. tBodies [0]. rows [0]. deleteCell (1); // Delete the content in a cell, which is equivalent to deleting a cell, and the following will hopefully be supplemented }; Script 5. Create a table using HTMLDOM The Code is as follows: Window. onload = function (){ // Create a table by 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'); // you can use the following method to add data: Td. innerHTML = "data "; Vartd2 = tr. insertCell (1 ); // Td2.appendChild (document. createTextNode ('data 2 ')); Td2.innerHTML = "Data 2 "; Document. body. appendChild (table ); }; When creating a table , , There is no specific method. You need to use document to create it. You can also simulate existing methods to write specific functions, such as insertTH.