一、 表格隔行换色
相关知识：
- onmouseover（）：鼠标移入事件，鼠标移上某元素上时触发；
- onmouseout（）：鼠标移出事件，鼠标移出去某元素时触发；
- onload（）：页面只要一加载，就立马触发；
隔行换色代码实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格各行换色</title>
<script>
window.onload=function(){
//获取表格的id
var tb1Ele=document.getElementById("tb1");
//获取表格中tbody部分的行数
var len=tb1Ele.tBodies[0].rows.length;
for(var i=0;i<len;i++){
if(i%2==0){
tb1Ele.tBodies[0].rows[i].style.backgroundColor="pink";
}else{
tb1Ele.tBodies[0].rows[i].style.backgroundColor="gold";
}
}
}
</script>
</head>
<body>
<table border="1px" align="center" width="500px" height="200px" id="tb1">
<thead align="center">
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody align="center">
<tr>
<td>1</td>
<td>张三</td>
<td>11</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>22</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>33</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>44</td>
</tr>
<tr>
<td>5</td>
<td>田七</td>
<td>55</td>
</tr>
<tr>
<td>6</td>
<td>汾九</td>
<td>66</td>
</tr>
</tbody>
</table>
</body>
</html>
效果图如下：
隔行换色.png
表格高亮显示代码实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格高亮显示</title>
<script>
function changeColor(id,flag){
if(flag=="over"){
document.getElementById(id).style.backgroundColor="red";
}
if(flag=="out"){
document.getElementById(id).style.backgroundColor="white";
}
}
</script>
</head>
<body>
<table border="1px" align="center" width="500px" height="200px" id="tb1">
<thead align="center">
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody align="center">
<tr id="tr1" onmouseover="changeColor('tr1','over')" onmouseout="changeColor('tr1','out')">
<td>1</td>
<td>张三</td>
<td>11</td>
</tr >
<tr id="tr2" onmouseover="changeColor('tr2','over')" onmouseout="changeColor('tr2','out')">
<td>2</td>
<td>李四</td>
<td>22</td>
</tr>
<tr id="tr3" onmouseover="changeColor('tr3','over')" onmouseout="changeColor('tr3','out')">
<td>3</td>
<td>王五</td>
<td>33</td>
</tr>
<tr id="tr4" onmouseover="changeColor('tr4','over')" onmouseout="changeColor('tr4','out')">
<td>4</td>
<td>赵六</td>
<td>44</td>
</tr>
<tr id="tr5" onmouseover="changeColor('tr5','over')" onmouseout="changeColor('tr5','out')">
<td>5</td>
<td>田七</td>
<td>55</td>
</tr>
<tr id="tr6" onmouseover="changeColor('tr6','over')" onmouseout="changeColor('tr6','out')">
<td>6</td>
<td>汾九</td>
<td>66</td>
</tr>
</tbody>
</table>
</body>
</body>
</html>
二、复选框全选或全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选和全不选</title>
<script>
function checkAll(){
//获取总复选框
var checkAllEle=document.getElementById("checkAll");
//对总复选框的状态进行判断
if(checkAllEle.checked==true){
//获取下面所有的复选框
var checkOnes = document.getElementsByName("checkOne");
//对所有的复选框进行遍历
for(var i=0;i<checkOnes.length;i++){
//拿到每一个复选框，将其状态置为选中
checkOnes[i].checked=true;
}
}else{
//获取下面所有的复选框
var checkOnes = document.getElementsByName("checkOne");
//对获取的所有复选框进行遍历
for(var i=0;i<checkOnes.length;i++){
//拿到每一个复选框，并将其状态置为未选中
checkOnes[i].checked=false;
}
}
}
</script>
</head>
<body>
<table border="1px" align="center" width="500px" height="200px">
<thead>
<tr>
<td colspan="4">
<input type="button" value="添加" />
<input type="button" value="删除" />
</td>
</tr>
<tr>
<th>
<input type="checkbox" id="checkAll" onclick="checkAll()"/>
</th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td><input type="checkbox" name="checkOne"/></td>
<td>1</td>
<td>张三</td>
<td>11</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"/></td>
<td>2</td>
<td>李四</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"/></td>
<td>3</td>
<td>王五</td>
<td>33</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"/></td>
<td>4</td>
<td>赵六</td>
<td>44</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"/></td>
<td>5</td>
<td>田七</td>
<td>55</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"/></td>
<td>6</td>
<td>汾九</td>
<td>66</td>
</tr>
</tbody>
</table>
</body>
</html>
效果图如下：
全选全不选.png
三、省市二级联动
相关知识：
- 数组的创建
//创建一个二维数组
var cities = new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
- var textNode = document.createTextNode（）：创建文本节点
- var elementNode = document.createElement（）：创建元素节点
- elementNode .appendChild（textNode）：将文本节点添加到元素节点中
代码实现如下：
第一部分：select标签部分：
<select onchange="changeCity(this.value)">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河南</option>
<option value="3">河北</option>
</select>
<select id="city">
</select>
JS部分：
<script>
//1.创建一个二维数组用于存储省份和城市
var cities = new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
function changeCity(val){
//7.获取第二个下拉列表
var cityEle = document.getElementById("city");
//9.清空第二个下拉列表的option内容
cityEle.options.length=0;
//2.遍历二维数组中的省份
for(var i=0;i<cities.length;i++){
//注意，比较的是角标
if(val==i){
//3.遍历用户选择的省份下的城市
for(var j=0;j<cities[i].length;j++){
//4.创建城市的文本节点
var textNode = document.createTextNode(cities[i][j]);
//5.创建option元素节点
var opEle = document.createElement("option");
//6.将城市的文本节点添加到option元素节点
opEle.appendChild(textNode);
//8.将option元素节点添加到第二个下拉列表中去
cityEle.appendChild(opEle);
}
}
}
}
</script>
效果如下：
二级联动.png
