表格逐行变色测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
td {
font-size: 13px;
text-align: center;
}
table {
width: 400px;
height: 200px;
}
.td1 {
text-align: left;
}
</style>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<table border="1px" cellspacing="0" align="center" onclick="change()">
<tr>
<td>全选/全不选<input type="checkbox" name="manycheck" onclick="checkall()"></td>
<td>姓名</td>
<td>性别</td>
<td>电话</td>
<td>爱好</td>
</tr>
<tr>
<td class="td1"><input type="checkbox" name="manycheck"></td>
<td>小明</td>
<td>男</td>
<td>110</td>
<td>小芳</td>
</tr>
<tr>
<td class="td1"><input type="checkbox" name="manycheck"></td>
<td>小芳</td>
<td>男</td>
<td>110</td>
<td>小陈</td>
</tr>
<tr>
<td class="td1"><input type="checkbox" name="manycheck"></td>
<td>小陈</td>
<td>男</td>
<td>110</td>
<td>小花</td>
</tr>
<tr>
<td class="td1"><input type="checkbox" name="manycheck"></td>
<td>小花</td>
<td>男</td>
<td>110</td>
<td>东东</td>
</tr>
<tr>
<td class="td1"><input type="checkbox" name="manycheck"></td>
<td>史特</td>
<td>男</td>
<td>110</td>
<td>陈虎</td>
</tr>
</table>
</body>
<script type="text/javascript">
var flag = true;
var flag2 = true;
function changecolor() {
if(flag) {
$("tr:odd").css("background-color", "yellow")
$("tr:even").css("background-color", "white")
} else {
$("tr:even").css("background-color", "yellow")
$("tr:odd").css("background-color", "white")
}
flag = !flag;
}
function change() {
if(flag2){
changecolor();
}
flag2 = true;
}
function checkall() {
changecolor();
for(var index = 1; index < $("input").length; index++) {
$("input")[index].checked = $("input")[0].checked;
}
if($("input")[0].checked == true) {
$("tr").css("background-color", "yellow");
} else {
$("tr").css("background-color", "white")
}
flag2 = false;
}
</script>
</html>