<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全选按钮</title>
<script type="text/javascript">
function checkall(chk){
var ischeck = chk.checked;
var list = document.getElementsByName('chkstu');
for(var i = 0;i < list.length;i++){
var mychk = list[i];
mychk.checked = chk.checked;
}
}
window.onload = function(){
var trlist = document.getElementsByTagName('tr');
for(var i = 1;i < trlist.length;i++){
var mytr = trlist[i];
var oldbgcolor = '';
mytr.onmouseover = function(){
oldbgcolor = this.style.background;
this.style.background = '#ccc';
}
mytr.onmouseout = function(){
this.style.background = oldbgcolor;
}
}
}
</script>
<style type="text/css">
table{
width: 400px;
margin: 0 auto;
border: 2px solid #ccc;
border-collapse: collapse;
margin-top: 30px;
}
.color{
background-color: #e1e1e1;
}
.black{
background-color: #FCF;
}
td{
height: 40px;
border: 1px solid #ccc;
padding-left: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<td><input type="checkbox" οnclick="checkall(this)" />全选</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr class="black">
<td><input type="checkbox" name="chkstu" /></td>
<td>刘依璠</td>
<td>女</td>
<td>20</td>
</tr>
<tr class="color">
<td><input type="checkbox" name="chkstu"></td>
<td>张盼玉</td>
<td>女</td>
<td>20</td>
</tr>
<tr class="black">
<td><input type="checkbox" name="chkstu" /></td>
<td>黄红霞</td>
<td>女</td>
<td>20</td>
</tr>
<tr class="color">
<td><input type="checkbox" name="chkstu" /></td>
<td>任子叶</td>
<td>女</td>
<td>19</td>
</tr>
<tr class="black">
<td><input type="checkbox" name="chkstu" /></td>
<td>谢梦姣</td>
<td>女</td>
<td>20</td>
</tr>
<tr class="color">
<td><input type="checkbox" name="chkstu" /></td>
<td>谷紫藤</td>
<td>女</td>
<td>20</td>
</tr>
<tr class="black">
<td><input type="checkbox" name="chkstu" /></td>
<td>代冉</td>
<td>女</td>
<td>20</td>
</tr>
<tr class="color">
<td><input type="checkbox" name="chkstu" /></td>
<td>张展</td>
<td>女</td>
<td>20</td>
</tr>
</table>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全选按钮</title>
<script type="text/javascript">
function checkall(chk){
var ischeck = chk.checked;
var list = document.getElementsByName('chkstu');
for(var i = 0;i < list.length;i++){
var mychk = list[i];
mychk.checked = chk.checked;
}
}
window.onload = function(){
var trlist = document.getElementsByTagName('tr');
for(var i = 1;i < trlist.length;i++){
var mytr = trlist[i];
var oldbgcolor = '';
mytr.onmouseover = function(){
oldbgcolor = this.style.background;
this.style.background = '#ccc';
}
mytr.onmouseout = function(){
this.style.background = oldbgcolor;
}
}
}
</script>
<style type="text/css">
table{
width: 400px;
margin: 0 auto;
border: 2px solid #ccc;
border-collapse: collapse;
margin-top: 30px;
}
.color{
background-color: #e1e1e1;
}
.black{
background-color: #FCF;
}
td{
height: 40px;
border: 1px solid #ccc;
padding-left: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<td><input type="checkbox" οnclick="checkall(this)" />全选</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr class="black">
<td><input type="checkbox" name="chkstu" /></td>
<td>刘依璠</td>
<td>女</td>
<td>20</td>
</tr>
<tr class="color">
<td><input type="checkbox" name="chkstu"></td>
<td>张盼玉</td>
<td>女</td>
<td>20</td>
</tr>
<tr class="black">
<td><input type="checkbox" name="chkstu" /></td>
<td>黄红霞</td>
<td>女</td>
<td>20</td>
</tr>
<tr class="color">
<td><input type="checkbox" name="chkstu" /></td>
<td>任子叶</td>
<td>女</td>
<td>19</td>
</tr>
<tr class="black">
<td><input type="checkbox" name="chkstu" /></td>
<td>谢梦姣</td>
<td>女</td>
<td>20</td>
</tr>
<tr class="color">
<td><input type="checkbox" name="chkstu" /></td>
<td>谷紫藤</td>
<td>女</td>
<td>20</td>
</tr>
<tr class="black">
<td><input type="checkbox" name="chkstu" /></td>
<td>代冉</td>
<td>女</td>
<td>20</td>
</tr>
<tr class="color">
<td><input type="checkbox" name="chkstu" /></td>
<td>张展</td>
<td>女</td>
<td>20</td>
</tr>
</table>
</body>
</html>
1674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
