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

Source: Internet
Author: User
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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.