Home > Developer > JavaScript
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 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 |
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:
...
| 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:
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
| 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 |
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 );
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:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
