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. 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
,
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
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. |
|