JavaWeb（5）-案例

在末尾添加节点

//获取到ul标签
var ul1=document.getElementById("ulid");
//创建标签
var li1 = document.createElement("li");
//创建文本
var text1 = document.createTextNode("aaa");
//把文本添加到li下边
li1.appendChild(text1);
//把li添加到ul下边
ul1.appendChild(li1);

动态显示时间

<div id="times">
</div>
<script type="text/javascript">
	function getD1(){
		//当前时间
		var date = new Date();
		//格式化
		var d1 = date.toLocaleString();
		//获取div
		var div1 = document.getElementById("times");
		div1.innerHTML = d1;
	}
	//定时器实现
	setInterval("getD1()",1000);
</script>

checkbox全选

1.全选按钮

function selAll(){
	//获取要操作的checkbox,返回数组
	var names = document.getElementsName("names");
	//遍历数组，使用checked属性
	for(var i=0;i<names.length;i++){
		var name1 = names[i];
		name1.checked = true;
	}
}

2.全不选按钮

function selNo(){
	//获取要操作的checkbox,返回数组
	var names = document.getElementsName("names");
	//遍历数组，使用checked属性
	for(var i=0;i<names.length;i++){
		var name1 = names[i];
		name1.checked = false;
	}
}

3.反选按钮

function selOther(){
	//获取要操作的checkbox,返回数组
	var names = document.getElementsName("names");
	//遍历数组，使用checked属性
	for(var i=0;i<names.length;i++){
		var name1 = names[i];
		if(name1.checked == false){
		name1.checked=true;
		}else{
		name1.checked=false;
		}
	}
}

4.全选checkbox

function selAllNo(){
	//获取checkbox
	var check1=document.getElementById("checkbox1");
	if(check1.checked==true){
		selAll();
	}else{
		selNo();
		}
}

下拉列表左右选择

1.设置两个下拉框

<select id="select1" multiple="multiple">
	<option></option>
	<option></option>
	<option></option>
	<option></option>
</select>
<select id="select2" multiple="multiple">
	<option></option>
	<option></option>
</select>
<script type="text/javascript">
</script>

2.选中添加到右边按钮

function selToRight(){
	//获取左边的option
	var sel1 = document.getElementById("select1");
	var opt1 = sel1.getElementsByTagName("option");
	//获取右边的select
	var sel2 = document.getElementById("select2");
	//遍历,判断是否被选中
	for(var i=0;i<opt1.length;i++){
		var option1 = opt1[i];
		if(option1.selected==true){
			sel2.appendChild(option1);
			i--;//因为length不断变化
		}
	}
}

3.全部添加到右边按钮

function selAllToRight(){
	//获取左边的option
	var sel1 = document.getElementById("select1");
	var opt1 = sel1.getElementsByTagName("option");
	//获取右边的select
	var sel2 = document.getElementById("select2");
	//遍历,判断是否被选中
	for(var i=0;i<opt1.length;i++){
		var option1 = opt1[i];
		sel2.appendChild(option1);
		i--;//因为length不断变化
	}
}

省市联动

创建两个下拉框
第一个下拉框设置onchange事件

<select id="countryid" onchange="add1(this.value)">
	<option value="中国">中国</option>
	<option value="美国">美国</option>
	<option value="日本">日本</option>
</select>
<select id="cityid">
</select>

创建一个数组存储数据

var arr=new Array(4);
arr[0] = ["中国","北京","南京","上海"];
arr[1] = ["美国","芝加哥","华盛顿","纽约"];
arr[2] = ["日本","东京","北海道","大阪"];

function add1(val){
	//由于每次都要向city添加option导致每次追加
	//判断添加前是否有option
	var city1 = document.getElementById("cityid");
	var options1 = city1.getElementsByTagName("option");
	for(var m=0;m<options1.length;m++){
		//得到每一个option
		var op = options1[m];
		city1.removeChild(op);
		m--;
	}
	//遍历二维数组
	for(var i=0;i<arr.length;i++){
		//得到二维数组中的每一个数组
		var arr1=arr[i];
		//得到遍历后的数组的第一个值
		var first = arr1[0];
		//判断传递的值与其是否相同
		if(first == val){
			//得到第一个值后边的元素
			for(var j=1;j<arr1.length;j++){
				var value1 = arr[j];
				//创建option
				var option1 = document.createElement("option");
				//创建文本
				var text1 = document.createTextNode(value1);
				//把文本添加到option
				option1.appendChild(text1);
				
			}
		}
	}
}

动态生成表格

输入行数，列数，显示表格

function add1(){
	//得到输入的行和列的值
	var h= document.getElementById("hang").value;
	var l= document.getElementById("lie").value;
	//生成表格
	//把表格放到一个变量里
	var tab= "<tabe>";
	//循环行
	for(var i=i;i<=h;i++){
		tab+="<tr>"
		//循环单元格
		for(var j=1;j<=l;j++){
			tab += "<td>123</td>"
		}
		tab+="</tr>"
	}
	tab +="</table>"
	var divv = document.getElementById("divv");
	//把table的代码设置到div中
	divv.innerHTML=tab;
}