And to teach us a lot about how to learn the DOM method, feel really benefit ah.
Here are a few examples I'd like to share with you.
1. Level two Drop-down menu (level is the province, two is the city, the request level selected provinces, two cities correspond to appear)
Step: 1 Basic FRAME (HTML): Two check boxes, and the second check box should start with no options, notice that the first Drop-down box acts as an event source, triggering the functional implementation part of JavaScript through the OnChange method.
Copy Code code as follows:
<xmp>
<select id= "province" onchange= "Selcity ()" >
<option >--Select Province--</option>
<option > Beijing </option>
<option > Tianjin </option>
<option > Hubei </option>
<option > Shandong </option>
<option > Hebei </option>
</select>
<select id= "City" >
<option>--Select City--</option>
</select>
</xmp>
2 page decoration does not need too much, just let the Drop-down menu show a good
3 through JavaScript to achieve the function, we want to select the province in the first Drop-down list, the following can directly show his city, see this one-to-many correspondence, first think of the map collection of this container, but Javascrip no map collection, then we think of the array such a container , and finally decided to use a two-dimensional array to help me achieve this function.
Copy Code code as follows:
<script type= "Text/javascript" >
function selcity ()
{
var arr= [[]--Select the city--"],[" Haidian District, "Chaoyang District", "Dongcheng District", "Xicheng District", "Xuanwu District"],
["Zone of Peace", "Hebei District", "Hedong District", "Hexi District", "Nankai District"],
["Wuhan", "Yichang", "Xiaogan", "Xiangfan", "Jingzhou"],
["Jinan", "Qingdao", "Yantai", "Weihai", "Rizhao"],
["Shijiazhuang", "Baoding", "Zhangjiakou", "Langfang", "Handan"]];
var selpnode = document.getElementById ("province");
var selcnode = document.getElementById ("city");
var citys = Arr[selpnode.selectedindex];
selcNode.options.length = 0;
for (var x=0; x<citys.length; x + +)
{
var optnode = document.createelement ("option");
Optnode.innertext = Citys[x];
Selcnode.appendchild (Optnode);
}
}
</script>
Summary: Each time you must remember to empty the array.
2. Mailing list
Thought: 1 First think of the overall framework, will certainly think of using a table format, and then through the operation of tables and rows and cells of these nodes to achieve related functions
2 CSS is mainly related to the format of the table, followed by the selection and two lines show different effects, through dynamic modification classname to achieve
Because of the length of the relationship, HTML and CSS part of the code is relatively simple, it is not shortcoming.
3 JavaScript to achieve a variety of different functions, the code is as follows:
Copy Code code as follows:
<script>
var color = "";
function GetStyle ()
{
var tablenode =document.getelementsbytagname ("table") [0];
var arr = tablenode.rows;
for (var x = 0;x<arr.length;x++)
{
if (x%2)
Arr[x].classname = "one";
Else
Arr[x].classname = "two";
var tdNode0 = arr[x].cells[0];
tdnode0.align = "center";
Arr[x].onmouseover = function ()
{
color = this.classname;//The original value record, after the mouse can go back to the original color
This.classname = "Checked";
}
Arr[x].onmouseout = function ()
{
This.classname = color;
}
}
}
We need to do the same thing all the way, so we're going to differentiate between the nodes by passing values.
function Allcheck (index)
{
var allnode = Document.getelementsbyname ("All") [index];
var checknodes = Document.getelementsbyname ("Mail");
for (Var x=0;x<checknodes.length;x++)
{
checknodes[x].checked = allnode.checked;
}
}
function checkbut (num)
{
var mailnodes = Document.getelementsbyname ("Mail");
for (var x=0; x<mailnodes.length; x + +)
{
if (num>1)
mailnodes[x].checked =! (mailnodes[x].checked)://To reverse oneself state to implement the inverse of the selection function
Else
mailnodes[x].checked = num;
}
}
Function del ()
{
var B = window.confirm (Are you sure you want to delete the selected message?) ");
if (!b)
return;
var mailnodes = Document.getelementsbyname ("Mail");
var arr = new Array ();
var pos = 0;
for (var x=0; x<mailnodes.length; x + +)
{
if (mailnodes[x].checked)
{
var trnode = Mailnodes[x].parentnode.parentnode;
arr[pos++] = Trnode;
}
}
for (var x=0; x<arr.length; x + +)
{
Arr[x].parentnode.removechild (Arr[x]);
}
GetStyle ();
}
Window.onload = GetStyle;
</script>
