Combination of JavaScript and DOM to dynamically create table instances _ basic knowledge-js tutorial

Source: Internet
Author: User
This article briefly introduces some basic and powerful DOM1.0 methods and how to use them in JavaScript. You can learn how to dynamically create, retrieve, control, and delete HTML elements. Introduction
This article briefly introduces some basic and powerful methods for DOM 1.0 and how to use them in JavaScript. You can learn how to dynamically create, retrieve, control, and delete HTML elements. These DOM methods also apply to XML. All browsers that fully support DOM 1.0 can run this example well, such as IE5 and Firefox.
Overview-Sample1.html
This article introduces DOM through the instance code. Start with the following HTML example. It uses DOM 1 to dynamically create an HTML table from JavaScript. It creates a small table consisting of four cells that contain text content. The text of a cell is "cell is column x of row y", indicating the number of rows and columns of a cell in the table.

The Code is as follows:




Instance code-create an HTML table using JavaScript and DOM
Script
Function start (){
// Obtain the body tag
Var mybody = document. getElementsByTagName ("body") [0];

// Create
















Element and ElementMytable = document. createElement ("table ");Mytablebody = document. createElement ("tbody ");// Create all cellsFor (var j = 0; j <2; j ++ ){// Create ElementMycurrent_row = document. createElement ("tr ");For (var I = 0; I <2; I ++ ){// Create Mycurrent_row.appendChild (mycurrent_cell );}// Line Add Mytablebody. appendChild (mycurrent_row );}// Set Add
Element
Mycurrent_cell = document. createElement ("td ");
// Create a text node
Currenttext = document. createTextNode ("cell is row" + j + ", column" + I + ");
// Add the created text node
Li
Mycurrent_cell.appendChild (currenttext );
// Set Columns
Add to row


Mytable. appendChild (mytablebody );// Set












Note the sequence of creating each element and text node.

1. Create <table> Elements
2. Create a child element of <table> <tbody>
3. Use a loop to create <tbody> sub-elements <tr>
4. Use cycles to create sub-elements for each <tr> <tb>
5. Create a text node for each <tb>

After <table>, <tbody>, <tr>, <td> elements and text nodes are created, we add them to their parent nodes in reverse order.
1. Add the created text node to <td>.

Mycurrent_cell.appendChild (currenttext );

2. Add the column <td> to the row <tr>

Mycurrent_row.appendChild (mycurrent_cell );

3. Add the row <tr> to <tbody>

Mytablebody. appendChild (mycurrent_row );

4. Add <tbody> to <table>

Mytable. appendChild (mytablebody );

5. Add <table> to <body>

Mybody. appendChild (mytable );

Remember this method. It is often used when you use W3C DOM. First, you create elements from top down and add them to the parent node from bottom up.
This is the HTML generated by JavaScript code:

...

Add Mybody. appendChild (mytable );// Set the border attribute of mytable to 2.Mytable. setAttribute ("border", "2 ");}Script :



The cell contains 0th rows and 0th columns. The cell contains 0th rows and 1st columns.
The cell contains 1st rows and 0th columns. The cell contains 1st rows and 1st columns.

...

This is the DOM object tree of the table elements generated by code and its child elements:

You only need to use a few DOM methods to construct such a table and its sub-elements. Remember to always remember the model tree you will create; this will make code writing easier. In the <table> tree in the figure, <table> has a child element <tbody>. <Tbody> there are two child elements. Each <tbody> sub-element (<tr>) has two sub-elements <td>. Finally, each <td> has a child element: a text node.
Basic DOM method-Sample2.html
The getElementByTagName method applies to documents and elements. Therefore, the root object of a document has the getElementByTagName method like all element objects. You can use element. getElementsByTagName (tagname) to obtain a list of all child elements of an element and select them using the tag name.
Element. getElementsByTagName returns a list of child elements with specific tag names. You can obtain an element from the child element list by calling an item method (passing an index parameter to it. Note that the index of the first child element in the list is 0. Next topic continues with the previous Table example. The following example is simpler and shows some basic methods:

The Code is as follows:




Instance code-create an HTML table using JavaScript and DOM
Script
Function start (){
// Obtain a list containing all body elements (only one)
// Select the first element in the list
MyBody = document. getElementsByTagName ("body") [0];

// Obtain all p elements in the body text element
MyBodyElements = myBody. getElementsByTagName ("p ");

// Obtain the second element in the p element list (index starts from 0)
MyP = myBodyElements [1];
}
Script


Hi


Hello





In this example, we set the myP variable to the DOM object that represents the second p element in the body.
1. Get a list containing all body Elements

MyBody = document. getElementsByTagName ("body") [0];

Because a valid html document has only one body element, this list contains only one element. We can use [0] to select the first element of the list.
2. Obtain all p elements in the blog sub-element

MyBodyElements = myBody. getElementsByTagName ("p ");

3. Select the second item in the p element list.

MyP = myBodyElements [1];


Once you get a DOM object of an html element, you can set its attributes. For example, to set the style background color attribute, you only need to add:

MyP. style. background = "rgb (255, 0, 0 )";

Use document. createTextNode ("..") to create a text node
Use the Document Object To Call The createTextNode method to create your text node. You only need to enter the text content. The returned value is an object that represents the text node.

MyTextNode = document. createTextNode ("world ");

The above Code creates a TEXT_NODE (Text block) node whose text data is "word", and the variable myTextNode points to this Node object. You need to set this text node as the byte point of other node elements to insert this text to your html page.
Insert an element using appendChild (...)
Therefore, by calling myP. appendChild ([node_element]), you can set this text node as the byte point of the Second p element.

MyP. appendChild (myTextNode );

In this example, note that "hello" and "world" are connected together: "helloworld ". So when you see the html page, the two text nodes hello and world seem to be a node, but in fact there are two nodes in this document model. The second node is a new TEXT_NODE node and the second byte of the second p label. The created text node is displayed in the document tree.

CreateTextNode and appendChild are simple ways to add spaces between hello and world. Note that the appendChild method will be added to the end of the last subnode, just as the world will be added to the end of hello. Therefore, if you want to add a text node between hello and world, you must use the insertBefore method instead of the appendChild method.

Create a new element using the Document Object and createElement (...) Method
You can use the createElement method to create new HTML elements or any other elements you want. For example, if you want to add a byte <p> element to the <body> element, you can add a new element node using the myBody element in "comment. To create a node, you only need to call document. createElement ("tagname "). For example:

MyNewPTAGnode = document. createElement ("p ");
MyBody. appendChild (myNewPTAGnode );


Delete a node using removeChild (...)
Each node can be deleted. The following code deletes the text node containing the word world in myP (the second <p> element.

MyP. removeChild (myTextNode );

Finally, you can add the text node myTextNode containing the word world to the newly created <p> element:

MyNewPTAGnode. appendChild (myTextNode );

The final object tree of the correction is as follows:

Create a table in a dynamic state (return to sample1.html)
The remainder of this article will be returned to sample1.html. The Object Tree Structure of the table created in this example is displayed.
Review HTML table structure

Create element nodes and add them to the Document Tree
Follow these steps to create a table in sample1.html:

Obtain the body object (the first item of the Document Object) to create all elements at the bottom. The source code under each node is the annotation of sample1.html according to the table structure.

The start function has a new line of code at the end, and uses another DOM method setAttribute to set the border attribute of the table. The setAttribute method has two parameters: attribute name and attribute value. You can use the setAttribute method to set any attribute of any element.

The Code is as follows:



Instance code-create an HTML table using JavaScript and DOM
Script
Function start (){
// Obtain the body
Var mybody = document. getElementsByTagName ("body") [0];

// Create


















And ElementMytable = document. createElement ("table ");Mytablebody = document. createElement ("tbody ");// Create all cellsFor (var j = 0; j <2; j ++ ){// Create ElementMycurrent_row = document. createElement ("tr ");For (var I = 0; I <2; I ++ ){// Create LineMycurrent_row.appendChild (mycurrent_cell );}// Set Add rows Mytablebody. appendChild (mycurrent_row );}// Set Add
Element
Mycurrent_cell = document. createElement ("td ");
// Create a text node
Currenttext = document. createTextNode ("cell is row" + j + ", column" + I + ");
// Add the created text node
Element
Mycurrent_cell.appendChild (currenttext );
// Set
Add


Mytable. appendChild (mytablebody );// Set











Use DOM and CSS to Process Tables
Get a text node from the table

If your object is a text node, you can use the data attribute to retrieve its content.


Mybody = document. getElementsByTagName ("body") [0];
Mytable = mybody. getElementsByTagName ("table") [0];
Mytablebody = mytable. getElementsByTagName ("tbody") [0];
Myrow = mytablebody. getElementsByTagName ("tr") [1];
Mycel = myrow. getElementsByTagName ("td") [1];

// The first entry in the byte point list of mycel
Myceltext = mycel. childNodes [0];

// The content of currenttext is the data of myceltext
Currenttext = document. createTextNode (myceltext. data );
Mybody. appendChild (currenttext );


Get a property value

Mytable. getAttribute ("border ");

Hide columns by changing the style attribute
When you use a JavaScript variable to point to an object, you can set its style attribute immediately. The code below is the modification of sample1.html, the cells in the second column are hidden, and the cell background in the first column is changed to red. Note that the style attribute is directly set.





Script
Function start (){
Var mybody = document. getElementsByTagName ("body") [0];
Mytable = document. createElement ("table ");
Mytablebody = document. createElement ("tbody ");

For (var j = 0; j <2; j ++ ){
Mycurrent_row = document. createElement ("tr ");
For (var I = 0; I <2; I ++ ){
Mycurrent_cell = document. createElement ("td ");
Currenttext = document. createTextNode ("Cell:" + I + j );
Mycurrent_cell.appendChild (currenttext );
Mycurrent_row.appendChild (mycurrent_cell );
// If the cell background color is set in column 0th
// If the cell is hidden in column 1st
If (I = 0 ){
Mycurrent_cell.style.background = "rgb (255, 0, 0 )";
} Else {
Mycurrent_cell.style.display = "none ";
}
}
Mytablebody. appendChild (mycurrent_row );
}
Mytable. appendChild (mytablebody );
Mybody. appendChild (mytable );
}
Script

The Code is as follows:

The Code is as follows:

Add Mybody. appendChild (mytable );// Set the border attribute of mytable to 2;Mytable. setAttribute ("border", "2 ");}Script This example introduces two new DOM attributes. First, use the childNodes attribute to obtain the byte point list of mycel. The childNodes list contains all the byte points, regardless of their names and types. Like the getElementsByTagName method, it returns a byte point list and uses [x] to obtain the desired byte point. In this example, myceltext is stored as the text node of the second cell in the second row of the table. Finally, it creates a new text node that contains the data attribute of myceltext and makes it a child node of the <body> element to display the final result of this example. At the end of sample1, a cell uses the setAttribute method of the mytable object. This cell is used to set the border attribute of this table. Use the getAttribute method to obtain this attribute:

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.