1. Create a form
<head> <title>sample code-traversing an HTML Table with JavaScript and DOM interfaces</title> <SC ript> function Start () {//Get the "reference for" body var mybody=document.getelementsbytagn Ame ("Body"). Item (0); Creates an element whose the tag name is TABLE mytable = document.createelement ("TABLE"); Creates an element whose the tag name is tbody mytablebody = document.createelement ("tbody"); Creating all cells for (j=0;j<2;j++) {//Creates a element whose tag name is TR Mycurrent_row=document.createelement ("TR"); for (i=0;i<2;i++) {//Creates a element whose tag name is TD mycurrent_cell=document . createelement ("TD"); Creates a Text Node Currenttext=document.createtextnode ("Cell is Row" +j+ ", column" +i); Appends the Text Node we created into THe cell TD mycurrent_cell.appendchild (currenttext); Appends the cell TD into the row TR mycurrent_row.appendchild (Mycurrent_cell); }//Appends the row TR into Tbody mytablebody.appendchild (Mycurrent_row); }//Appends tbody into TABLE mytable.appendchild (mytablebody); Appends TABLE into the body mybody.appendchild (mytable); Sets the border attribute of MyTable to 2; Mytable.setattribute ("Border", "2"); } </script> </head> <body onload= "Start ()" > </body> </html>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The order in which we created the elements and the text node:
We created the TABLE element.
Next, we created the TBODY element, which is a child of the TABLE element.
Next, we used a loop to create the TR elements, which are children of the tbody element.
For each TR element, we are used a loop to create the TD elements, which are children of TR elements.
For each TD element, we then created the "text node with the" table cell ' s text.
Once we have created the TABLE, Tbody, TR, and TD elements and then the text node, we then append each object to its paren T in the opposite order:
The Attach each text node to its parent TD element using
Mycurrent_cell.appendchild (Currenttext);
Next, we attach each TD element to its parent TR element using
Mycurrent_row.appendchild (Mycurrent_cell);
Next, we attach each TR element to the parent TBODY element using
Mytablebody.appendchild (Mycurrent_row);
Next, we attach the TBODY element to its parent TABLE element using
Mytable.appendchild (Mytablebody);
Next, we attach the TABLE element to its parent BODY element using
Mybody.appendchild (mytable);
Remember this technique. You'll use it frequently in programming for the "the" the "the" consortium DOM. The ' top ' of the ' create elements ' down; Then you attach the "children to the" parents from the bottom up.
Here's the HTML markup generated by the JavaScript code:
...
<table border=5>
<tr><td>cell is row 0 column 0</td><td>cell is row 0 column 1</td></tr>
<tr><td>cell is row 1 column 0</td><td>cell is row 1 column 1</td></tr>
</TABLE>
...
Here's the DOM object tree generated by the code for the "TABLE element and its" child elements:
Image:sample1-tabledom.jpg
You can builds this table and their internal child elements by using just a few DOM methods. Remember to keep in mind the "tree model for" structures you are planning to create; This'll make it easier to write the necessary code. In the table tree of Figure 1 is the element table has one child, the element tbody. Tbody has two children. Each tbody ' s child (TR) has one child (TD). Finally, each TD has one child, a text node.
2,
<textarea id="runcode90695"><ptml> <pead> <title>sample code-traversing an HTML Table with JavaScript and DOM interfaces< ;/title> <script> function Start () {//Get a list of ' all ' body elements (there'll only is on e) mydocumentelements=document.getelementsbytagname ("Body"); The BODY element itself is the ' the ' list Mybody=mydocumentelements.item (0); Now, get all the P elements that are children's body mybodyelements=mybody.getelementsbytagname ("P"); Get the second item of the list of P elements myp=mybodyelements.item (1); } </script> </pead> <body onload= "Start ()" > <p>hi</p> <p>hello</p> </bo Dy> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
In this example, we set the "MYP variable to the" DOM object for the second P element inside the body:
The-A-list of all elements via
document.getElementsByTagName ("Body")
Since There is only the one BODY element, the any valid the HTML document, this list would have only one item.
Next, we get the "the" "the" the "the" the "the" object for the BODY element itself, via which
Mybody=mydocumentelements.item (0);
Next, we get all the P elements that are children's the body via
Mybodyelements=mybody.getelementsbytagname ("P");
Finally, we get the second item from the list of P elements via
Myp=mybodyelements.item (1);
Image:sample2a2.jpg
Once you have gotten is the DOM object for a HTML element, you can set its properties. For example, if your want to set the style background color property, you just add:
Myp.style.background= "RGB (255,0,0)";
Setting Inline STYLE attribute
Edit
Creating Textnodes with document.createTextNode (..)
Use the Document object to invoke the createTextNode and create your text node. You are just need to pass the text content. The return value is a object that represents the text node.
Mytextnode=document.createtextnode ("World");
This means so you have created a node of the type Text_node (a piece of text) whose TEXT data are "world" and Mytextnode Is your reference to this node object. To inserts this text into the your HTML page, you need to make this text node A child of some the other node element.
Edit
Inserting Elements with AppendChild (..)
So, by calling Myp.appendchild ([node_element]), your are making the element a new child of the second P element.
Myp.appendchild (Mytextnode);
After testing this sample, which is the words hello and world are together:helloworld. So visually, where you are the HTML page it seems like the two text nodes Hello and world are a single node, but remember T Hat in the document model, there are two nodes. The second node is a new node of type Text_node, and it's the second child of the second P tag. The following figure shows the recently created Text Node object inside the document tree.
Image:sample2b2.jpg
createTextNode and AppendChild are a simple way to include white spaces between the words hello and world. Another Important note was that this appendchild method would append the child over the last child, just like the word world has been added after the word hello. So if you are want to append a-Text Node between Hello and world you'll need to use insertbefore instead of appendchild.
Edit
Creating New Elements with the Document object and the CreateElement (..) method
You can create a new HTML elements or any other element for you want with createelement. For example, if your want to create a new P element as a child of the "BODY element", you can use the Mybody in the previous Example and append a new element node. To create a node simply call Document.createelement ("TagName"). For example:
Mynewptagnode=document.createelement ("P");
Mybody.appendchild (Mynewptagnode);
Image:sample2c.jpg
Edit
Removing nodes with the RemoveChild (..) method
Each node can is removed. The following line removes the text node which contains the word world of the MYP (second P element).
Myp.removechild (Mytextnode);
Finally You can add Mytextnode (which contains, the word world) into the recently created P element:
Mynewptagnode.appendchild (Mytextnode);
The final state for the modified object, looks like this:
Image:sample2d.jpg
Edit
Creating a table dynamically (back to sample1.html)
For the rest of this article we'll continue working with sample1.html. The following figure shows the Table object tree structure for the table, created in the sample.
Edit
Reviewing the HTML Table structure
Image:sample1-tabledom.jpg
Edit
creating element nodes and inserting them into the document tree
The basic steps to create the table in Sample1.html are:
Get the Body object (the the Document object).
Create all the elements.
Finally, append each of the according to the table structure (as in the above figure). The following source code is a commented version for the sample1.html.
At the "Start function there is" a new line of code. The table ' s border property is set using another DOM method, setattribute. SetAttribute has two arguments:the attribute name and the attribute value. can set any attribute of any element using the SetAttribute method.
<head>
<title>sample code-traversing an HTML Table with JavaScript and DOM interfaces</title>
<script>
function Start () {
Get the "reference for the" body
var mybody=document.getelementsbytagname ("Body"). Item (0);
Creates an element whose the tag name is TABLE
MyTable = document.createelement ("TABLE");
Creates an element whose the tag name is Tbody
Mytablebody = document.createelement ("tbody");
Creating All cells
for (j=0;j<2;j++) {
Creates an element whose the tag name is TR
Mycurrent_row=document.createelement ("TR");
for (i=0;i<2;i++) {
Creates an element whose the tag name is TD
Mycurrent_cell=document.createelement ("TD");
Creates a Text Node
Currenttext=document.createtextnode ("Cell is Row" +j+ ", column" +i);
Appends the Text Node we created into the cell TD
Mycurrent_cell.appendchild (Currenttext);
Appends the cell TD into the row TR
Mycurrent_row.appendchild (Mycurrent_cell);
}
Appends the row TR into tbody
Mytablebody.appendchild (Mycurrent_row);
}
Appends tbody into TABLE
Mytable.appendchild (Mytablebody);
Appends TABLE into the body
Mybody.appendchild (mytable);
Sets the border attribute of MyTable to 2;
Mytable.setattribute ("Border", "2");
}
</script>
</head>
<body onload= "Start ()" >
</body>
</html>
Edit
Manipulating the table with DOM and CSS
Edit
Getting a text node from the table
This example introduces two new dom attributes. first it uses the childnodes attribute to get the list of child nodes of mycel. The childNodes list includes all child nodes, regardless of what their name or type is. like getelementsbytagname, it returns a list of nodes. the difference Is that getelementsbytagname only returns elements of the specified tag name. once you have the returned list, use item (x) method to retrieve the desired child item. This example Stores in myceltext the text node of the second cell in the second row of the table. then, to display the results in this example, it creates a new text node whose content is the data of Myceltext and appends it as a child of the body element.
If your object is a text node, you can use the data attribute and retrieve the text content of the node.
Mybody=document.getelementsbytagname ("Body"). Item (0);
Mytable=mybody.getelementsbytagname ("table"). Item (0);
Mytablebody=mytable.getelementsbytagname ("Tbody"). Item (0);
Myrow=mytablebody.getelementsbytagname ("tr"). Item (1);
Mycel=myrow.getelementsbytagname ("TD"). Item (1);
The ChildNodes list of Mycel
Myceltext=mycel.childnodes.item (0);
Content of Currenttext is the data content of Myceltext
Currenttext=document.createtextnode (Myceltext.data);
Mybody.appendchild (Currenttext);
Edit
Getting an attribute value
At the "End of" Sample1 there is a call to SetAttribute on the MyTable object. This is call is used to set the border property of the table. To retrieve the "value of", use the GetAttribute method:
Mytable.getattribute ("border");
Edit
Hiding a column by changing style properties
Once you have the "object in your" JavaScript variable, you can set style properties directly. The following code is a modified version of sample1.html in which each cell of the second column are hidden and each cell O f the "the" is changed to have a red background. This is the Style property is set directly.
<html>
<body onload= "Start ()" >
</body>
<script>
function Start () {
var mybody=document.getelementsbytagname ("Body"). Item (0);
MyTable = document.createelement ("TABLE");
Mytablebody = document.createelement ("tbody");
for (j=0;j<2;j++) {
Mycurrent_row=document.createelement ("TR");
for (i=0;i<2;i++) {
Mycurrent_cell=document.createelement ("TD");
Currenttext=document.createtextnode ("Cell is:" +i+j);
Mycurrent_cell.appendchild (Currenttext);
Mycurrent_row.appendchild (Mycurrent_cell);
Set the cell background color
If the column is 0. If The column is 1 hide the Cel
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>
</html>
Taken from "http://developer.mozilla.org/cn/docs/%E4%BD%BF%E7%94%A8Javascript%E5%92%8CDOM_Interfaces%E6%9D%A5%E5%A4%84% E7%90%86html "
Page Category: DOM
