<!DOCTYPE html>
<html>
<head>
<title>js隔行换色与全选和反选</title>
<style type="text/css">
div{
margin: 100px auto;
width: 600px;
height: 300px;
background: #ccc;
}
table{
width: 600px;
border: 1px solid green;
border-collapse: collapse;
}
td{
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<div>
<table >
<tr>
<th width="120px;"><input onclick="chackAll()" type="checkbox" name="">全选</th>
<th>标题</th>
<th>状态</th>
</tr>
<tbody id="body_tr">
<tr>
<td><input type="checkbox" name="list"></td>
<td>第一个</td>
<td>第二个</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>第一个</td>
<td>第二个</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>第一个</td>
<td>第二个</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>第一个</td>
<td>第二个</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>第一个</td>
<td>第二个</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>第一个</td>
<td>第二个</td>
</tr>
</tbody>
</table>
<p>
<button onclick="chackAll()">全选</button>
<button onclick="chackOut()">反选</button>
</p>
</div>
<script type="text/javascript">
//隔行换色;
function bgColor(){
//找到所有的tr;
var trList= document.getElementById('body_tr').getElementsByTagName('tr');
for(var i=0;i<trList.length;i++){
if (i%2==0) {
trList[i].style.background = "red";
}else{
trList[i].style.background = "green";
}
}
}
// 外部调用函数;
bgColor();
// 点击全选事件;
function chackAll(){
//找到所有的input选择框;
var objList = document.getElementsByTagName('input');
// 遍历得到他的长度;
for(var i=0;i<objList.length;i++){
objList[i].checked=true;
}
}
// 点击反选事件;
function chackOut(){
//找到所有的input选择框;
var objList = document.getElementsByName('list');
// 遍历得到他的长度;
for(var i=0;i<objList.length;i++){
//判断当前选择框是否为选中状态?;
if(objList[i].checked){
objList[i].checked=false;
}else{
objList[i].checked=true;
}
}
}
</script>
</body>
</html>
<!--
反选思路:获取到所有的复选框;然后进行遍历;判断当前选择框的选中状态;
若为选中.则将状态改变为未选中(false),反之为选中(true);
-->
<!-- 隔行换色思路:获取所有tr标签:然后进行遍历;判断当前所在行的奇偶
(取余是否为真或取余是否等于0或其他的),在然后将此行赋予一个颜色; -->
博客列表 >js基础学习-隔行换色和反选
js基础学习-隔行换色和反选
- 意外的博客原创转载
- 2019年04月04日 22:48:03605浏览
上一条：js基础学习-math随机对象下一条：PHP数组使用2
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
