首页 > WEB开发 > DOM操作练习(JavaScript)
2014
08-06

DOM操作练习(JavaScript)

1、实现一个二级联动下拉列表(效果如下图)

02. JavaScript & Json入门30

HTML代码:

省份:<select id="province">
	<option value="0">--请选择--</option>
	<option value="1">北京</option>
	<option value="2">重庆</option>
</select>

城市:<select id="city">
	<option>--请选择--</option>
</select>

JavaScript代码:

var cities = new Array();
cities[1] = new Array("海淀","昌平","西城");
cities[2] = new Array("沙坪坝","万州","南岸");

window.onload = function(){
	var provinceSel = document.getElementById("province");
	var citySel = document.getElementById("city");

	provinceSel.onchange = function(){
		citySel.options.length=1; //每当省份选择改变的时候需要将城市列表长度变成1
		for(var i = 0;i < cities[provinceSel.value].length;i++){
			citySel.add(new Option(cities[provinceSel.value][i],cities[provinceSel.value][i]));
		}
	};
};

2、实现如下图所示的功能:

1)点击添加用户会新增一个用户到列表中

2)点击删除用户会将所在行用户删除。

02. JavaScript & Json入门790

HTML代码:

姓名:<input type="text" id="name" />
联系方式:<input type="text" id="email" />
年龄:<input type="text" id="age"  onkeypress="check(event)"/>
<input type="button" value="添加用户" onclick="addLine()"/>
<br /><br /><hr /><br />
<table id="userTable" align="center" border=1 cellspacing=0 cellpadding=5 width="50%">
	<tr>
		<th>姓名</th>
		<th>联系方式</th>
		<th>年龄</th>
		<th>操作</th>
	</tr>
	<tr>
		<td>习近平</td>
		<td>fda@fd.com</td>
		<td>15</td>
		<td>
			<input type="button" value="删除" onclick="delLine(this)" />
		</td>
	</tr>
</table>

第一种实现方式:XML DOM方式

//添加一行信息
function addLine(){
	var name = document.getElementById("name").value;
	var email = document.getElementById("email").value;
	var age = document.getElementById("age").value;
	var tableNode = document.getElementById("userTable");
	var trNode = document.createElement("tr");

	var tdNode1 = document.createElement("td");
	var textNode1 = document.createTextNode(name);
	tdNode1.appendChild(textNode1);

	var tdNode2 = document.createElement("td");
	var textNode2 = document.createTextNode(email);
	tdNode2.appendChild(textNode2);

	var tdNode3 = document.createElement("td");
	var textNode3 = document.createTextNode(age);
	tdNode3.appendChild(textNode3);

	var tdNode4 = document.createElement("td");
	//偷下懒
	tdNode4.innerHTML = "<input type='button' value='删除' onclick='delLine(this)' />";

	trNode.appendChild(tdNode1);
	trNode.appendChild(tdNode2);
	trNode.appendChild(tdNode3);
	trNode.appendChild(tdNode4);

	tableNode.appendChild(trNode);
}
//删除一行
function delLine(obj){
	var trNode = obj.parentNode.parentNode;
	trNode.parentNode.removeChild(trNode);
}
function check(obj){
	if(obj.keyCode == 13){
		addLine();
	}
}

第二种实现方式:HTML DOM 方式

//添加一个用户信息
function addLine(){
	var name = document.getElementById("name").value;
	var email = document.getElementById("email").value;
	var age = document.getElementById("age").value;
	var tableEle = document.getElementById("userTable");

	var trEle = tableEle.insertRow(tableEle.rows.length);
	trEle.innerHTML = "<td>"+name+"</td><td>"+email+"</td><td>"+age+"</td><td>"+
		"<input type='button' value='删除' onclick='delLine(this)' />	</td>";
}

3、HTML DOM实现全选/全不选/反选功能:

02. JavaScript & Json入门2977

HTML代码如下:

<h1>请选择您的爱好:</h1>
<input type="checkbox" onchange="checkOrUncheck(this)"/>全选/全不选<br />
<input type="checkbox" name="hobby" />足球
<input type="checkbox" name="hobby" />篮球
<input type="checkbox" name="hobby" />游泳
<input type="checkbox" name="hobby" />唱歌 <br />
<input type="button" value="全 选" onclick="allCheck()"/>
<input type="button" value="全不选" onclick="allUncheck()"/>
<input type="button" value="反选" onclick="reverseCheck()"/>

HTML DOM实现代码如下:

var checkboxes = document.getElementsByName("hobby");
//全选
function allCheck(){
	for(var i = 0;i < checkboxes.length;i ++){
		checkboxes[i].checked = true;
	}
}
//全不选
function allUncheck(){
	for(var i = 0;i < checkboxes.length;i ++){
		checkboxes[i].checked = false;
	}
}
//反选
function reverseCheck(){
	for(var i = 0;i < checkboxes.length;i ++){
		checkboxes[i].checked = !checkboxes[i].checked;
	}
}
//全选/全不选
function checkOrUncheck(obj){
	if(obj.checked){
		allCheck();
	}else{
		allUncheck();
	}
}

4、实现下图所示右移添加 / 左移删除功能

02. JavaScript & Json入门3968

HTML代码如下:

<table width="30%">
	<tr>
		<td>
			<select id="select1" size=8 multiple>
		<option>北京</option>
		<option>上海</option>
		<option>天津</option>
		<option>重庆</option>
		<option>广州</option>
		<option>深圳</option>
	</select>
		</td>
		<td>
			<input type="button" id="button_1" value="-->" />
			<input type="button" id="button_2" value="->>" /><br />
			<input type="button" id="button_3" value="<--" />
			<input type="button" id="button_4" value="<<-" />
		</td>
		<td>
			<select id="select2" size=8 >

	</select>
		</td>
	</tr>
</table>

JavaScript实现代码如下:

var selectObj = document.getElementById("select1");
var selectObj2 = document.getElementById("select2");
document.getElementById("button_1").onclick = function(){
	for(var i = selectObj.options.length-1;i >= 0;i--){
		if(selectObj.options[i].selected){
			selectObj2.appendChild(selectObj.options[i]);
		}
	}
};
document.getElementById("button_2").onclick = function(){
	for(var i = selectObj.options.length-1;i >= 0;i--){
		selectObj2.appendChild(selectObj.options[i]);
	}
};
document.getElementById("button_3").onclick = function(){
	for(var i = selectObj2.options.length-1;i >= 0;i--){
		if(selectObj2.options[i].selected){
			selectObj.appendChild(selectObj2.options[i]);
		}
	}
};
document.getElementById("button_4").onclick = function(){
	for(var i = selectObj2.options.length-1;i >= 0;i--){
		selectObj.appendChild(selectObj2.options[i]);
	}
};

5、基于XML的省市区三级联动,效果如下图:

02. JavaScript & Json入门5411

注:XML省市区数据来源为QQ安装目录下的LocList.xml文件。

 HTML代码:

省份:<select id="province">
	<option>--请选择--</option>
</select>
城市:<select id="city">
	<option>--请选择--</option>
</select>
<span style="display:none;">
区县:<select id="region">
	<option>--请选择--</option>
</select>
</span>

JavaScript代码

//加载XML文件
var xmlDoc = loadXMLDoc("LocList.xml");
window.onload = function(){
	var selectObj1 = document.getElementById("province");
	var selectObj2 = document.getElementById("city");
	var selectObj3 = document.getElementById("region");

	var stateNodes = xmlDoc.getElementsByTagName("State");
	var cityNodes = null;
	var regionNodes = null;

	for(var i = 0;i < stateNodes.length;i ++){
		selectObj1.add(new Option(stateNodes[i].getAttribute("Name"),stateNodes[i].getAttribute("Code")));
	}
	//
	selectObj1.onchange = function(){
		selectObj2.options.length=1;
		selectObj3.parentNode.style.display = "none";
		var selectIndex = this.selectedIndex;
		var code = this.options[selectIndex].value;

		for(var i = 0;i < stateNodes.length;i ++){
			if(code == stateNodes[i].getAttribute("Code")){
				cityNodes = stateNodes[i].getElementsByTagName("City");
				for(var j = 0;j < cityNodes.length;j ++){
					selectObj2.add(new Option(cityNodes[j].getAttribute("Name"),cityNodes[j].getAttribute("Code")));
				}
				break;
			}
		}
	};

	selectObj2.onchange = function(){
		selectObj3.options.length = 1;
		var selectIndex = this.selectedIndex;
		var code = this.options[selectIndex].value;

		for(var j = 0;j < cityNodes.length;j ++){
			if(code == cityNodes[j].getAttribute("Code")){
				regionNodes = cityNodes[j].getElementsByTagName("Region");
				if(regionNodes.length != 0){
					selectObj3.parentNode.style.display = "inline";
					for(var k = 0;k < regionNodes.length;k ++){
						selectObj3.add(new Option(regionNodes[k].getAttribute("Name"),regionNodes[k].getAttribute("Code")));
					}
				}else{
					selectObj3.parentNode.style.display = "none";
					break;
				}
			}
		}
	};

};

留下一个回复

你的email不会被公开。