JavaScript案例

JavaScript案例:

1.表格隔行变色

<title>表格隔行变色</title>
<script type="text/javascript">
/*
* 增加一个页面加载事件,页面加载完毕,给表格实现隔行换色
* ty是奇数行 设置背景色bgcolor="xx色"
* ty是偶数行 设置背景色bgcolor="yy色"
*/
window.onload=function(){
/*
* 分析:
* 1.获取页面中所有tr对象,使用getElementsbyTagName("tr")
* 2.遍历存储所有tr对象的数组,获取每一个tr对象
* 3.判断对象的索引是奇数还是偶数
* ty是奇数行 设置背景色bgcolor="xx色"
* ty是偶数行 设置背景色bgcolor="yy色"
*/
//1.获取页面中所有tr对象,使用getElementsbyTagName("tr")
var trEleArr = document.getElementsByTagName("tr");
//2.遍历存储所有tr对象的数组,获取每一个tr对象
for(var i=2; i<trEleArr.length;i++){
var trEle = trEleArr[i];
//3.判断对象的索引是奇数还是偶数
if(i%2==0){//偶数
//ty是偶数行 设置背景色bgcolor="yy色"
trEle.setAttribute("bgcolor","yellow");
}else{//奇数
//ty是奇数行 设置背景色bgcolor="xx色"
trEle.setAttribute("bgcolor","pink");
}

/*
* 了解
* 给当前的行增加一个鼠标移入事件,改变背景色为"zz色"
* 给当前的行增加一个鼠标移出事件,把背景色还原为移入之前的颜色
*/
//定义一个变量,记录移入之前的背景色
var bg;
trEleArr[i].onmouseover=function(){
bg = this.bgColor;
this.setAttribute("bgcolor","red");
}

trEleArr[i].onmouseout=function(){
this.setAttribute("bgcolor",bg);
}
}
}
</script>

2.全选和全不选

<title>全选和全不选</title>
<script type="text/javascript">
function selectAll(obj){
//alert(obj);//[object HTMLInputElement]
/*
* checkbox属性checked 被选择值就是true 没有选中就是false
*/
//alert(obj.checked);
/*
* 全选的原理:
* 其它的复选框跟着全选走
* 全选选中,其它的复选框也都选中
* 全选没有选,其它的复选框也不能选
*/
//1.获取全选之前的其它复选框可以使用class的属性值获取itemSelect getElementsByClassName
var cbEleArr = document.getElementsByClassName("itemSelect");
//2.遍历存储复选框的数组
for(var i=0; i<cbEleArr.length; i++){
//3.设置复选框的属性checked和全选一致
cbEleArr[i].checked=obj.checked;
}
}
</script>

3.省市二级联动

<title>省市二级联动</title>    
<script type="text/javascript">
/*
* 省和市的二级联动
* 一个省对应多个城市
* 省份已经有了,可以定义一个二维数组存储每个省份对应的城市
*/
var citys = [
["昌平","朝阳","海淀"],
["深圳","东莞","广州"],
["石家庄","邯郸","保定"]
];

function selectCity(value){
/*
* selectCity的参数value就是option标签对应的value属性值0,1,2
* 可以根据value属性值,去二维数组中找省份对应的城市
* 把省份对应的城市,赋值到cityId的select标签中
*/
//alert(value+" "+citys[value]);
//1.获取id是cityId的select标签对象,用于添加option使用
var cityIdEle = document.getElementById("cityId");

//7.添加option之前,清空select的标签体(初始化)
cityIdEle.innerHTML="<option value=''>----请-选-择-市----</option>";

//2.遍历省份对应的城市数组
for(var i=0; i<citys[value].length; i++){
//3.获取每一个城市的名称
var cityName = citys[value][i];
//alert(cityName);
//4.创建option标签对象
var optEle = document.createElement("option");//<option></option>
//5.把城市名字添加到option对象中,添加标签体
optEle.innerHTML=cityName;
//6.使用select标签对象,添加孩子option
cityIdEle.appendChild(optEle);
}
}
</script>