一剃诅、 表格隔行換色
相關(guān)知識(shí)：
- onmouseover（）：鼠標(biāo)移入事件厕怜，鼠標(biāo)移上某元素上時(shí)觸發(fā)叠国；
- onmouseout（）：鼠標(biāo)移出事件未檩，鼠標(biāo)移出去某元素時(shí)觸發(fā)；
- onload（）：頁(yè)面只要一加載粟焊，就立馬觸發(fā)冤狡；
隔行換色代碼實(shí)現(xiàn)如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格各行換色</title>
<script>
window.onload=function(){
//獲取表格的id
var tb1Ele=document.getElementById("tb1");
//獲取表格中tbody部分的行數(shù)
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>編號(hào)</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
表格高亮顯示代碼實(shí)現(xiàn)如下：
<!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>編號(hào)</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>
二、復(fù)選框全選或全不選
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全選和全不選</title>
<script>
function checkAll(){
//獲取總復(fù)選框
var checkAllEle=document.getElementById("checkAll");
//對(duì)總復(fù)選框的狀態(tài)進(jìn)行判斷
if(checkAllEle.checked==true){
//獲取下面所有的復(fù)選框
var checkOnes = document.getElementsByName("checkOne");
//對(duì)所有的復(fù)選框進(jìn)行遍歷
for(var i=0;i<checkOnes.length;i++){
//拿到每一個(gè)復(fù)選框项棠，將其狀態(tài)置為選中
checkOnes[i].checked=true;
}
}else{
//獲取下面所有的復(fù)選框
var checkOnes = document.getElementsByName("checkOne");
//對(duì)獲取的所有復(fù)選框進(jìn)行遍歷
for(var i=0;i<checkOnes.length;i++){
//拿到每一個(gè)復(fù)選框悲雳，并將其狀態(tà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>編號(hào)</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
三、省市二級(jí)聯(lián)動(dòng)
相關(guān)知識(shí)：
- 數(shù)組的創(chuàng)建
//創(chuàng)建一個(gè)二維數(shù)組
var cities = new Array(3);
cities[0] = new Array("武漢市","黃岡市","襄陽(yáng)市","荊州市");
cities[1] = new Array("長(zhǎng)沙市","郴州市","株洲市","岳陽(yáng)市");
cities[2] = new Array("石家莊市","邯鄲市","廊坊市","保定市");
cities[3] = new Array("鄭州市","洛陽(yáng)市","開(kāi)封市","安陽(yáng)市");
- var textNode = document.createTextNode（）：創(chuàng)建文本節(jié)點(diǎn)
- var elementNode = document.createElement（）：創(chuàng)建元素節(jié)點(diǎn)
- elementNode .appendChild（textNode）：將文本節(jié)點(diǎn)添加到元素節(jié)點(diǎn)中
代碼實(shí)現(xiàn)如下：
第一部分：select標(biāo)簽部分：
<select onchange="changeCity(this.value)">
<option>--請(qǐng)選擇--</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.創(chuàng)建一個(gè)二維數(shù)組用于存儲(chǔ)省份和城市
var cities = new Array(3);
cities[0] = new Array("武漢市","黃岡市","襄陽(yáng)市","荊州市");
cities[1] = new Array("長(zhǎng)沙市","郴州市","株洲市","岳陽(yáng)市");
cities[2] = new Array("石家莊市","邯鄲市","廊坊市","保定市");
cities[3] = new Array("鄭州市","洛陽(yáng)市","開(kāi)封市","安陽(yáng)市");
function changeCity(val){
//7.獲取第二個(gè)下拉列表
var cityEle = document.getElementById("city");
//9.清空第二個(gè)下拉列表的option內(nèi)容
cityEle.options.length=0;
//2.遍歷二維數(shù)組中的省份
for(var i=0;i<cities.length;i++){
//注意香追，比較的是角標(biāo)
if(val==i){
//3.遍歷用戶選擇的省份下的城市
for(var j=0;j<cities[i].length;j++){
//4.創(chuàng)建城市的文本節(jié)點(diǎn)
var textNode = document.createTextNode(cities[i][j]);
//5.創(chuàng)建option元素節(jié)點(diǎn)
var opEle = document.createElement("option");
//6.將城市的文本節(jié)點(diǎn)添加到option元素節(jié)點(diǎn)
opEle.appendChild(textNode);
//8.將option元素節(jié)點(diǎn)添加到第二個(gè)下拉列表中去
cityEle.appendChild(opEle);
}
}
}
}
</script>
效果如下：
二級(jí)聯(lián)動(dòng).png
