javascript吧 关注：269,394贴子：906,493
- 2回复贴，共1页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
body{font-size: 12px;}
table{width:360px;border-collapse: collapse;}
table tr th,td{border:solid 1px #666;text-align:center;}
table tr td img{border:solid 1px #CCC;padding:3px;width:42px;height:60px;cursor:pointer;}
table tr td span{float:left;padding-left:12px;}
table tr th{background-color: #CCC;height:32px;}
.clsImg{position:absolute;border:solid 1px #CCC;padding:3px;width:85px;height:120px;background-color:#EEE;display:none;}
.btn{border:solid 1px #666;padding:2px;width:50px;}
</style>
</head>
<body>
<table>
<tr>
<th>选项</th>
<th>编号</th>
<th>封面</th>
<th>购书人</th>
<th>性别</th>
<th>购书价</th>
</tr>
<tr id="0">
<td><input type="checkbox" value="0" id="Checkbox1" /></td>
<td>1001</td>
<td><img src="img/loader_ico.gif" alt="" /></td>
<td>李晓明</td>
<td>男</td>
<td>36.60</td>
</tr>
<tr id="1">
<td><input type="checkbox" id="Checkbox2" value="1" /></td>
<td>1002</td>
<td><img src="img/ico2.gif" alt="" /></td>
<td>李明明</td>
<td>女</td>
<td>37.80元</td>
</tr>
<tr id="2">
<td><input type="checkbox" id="Checkboxq3" value="2" /></td>
<td>1003</td>
<td><img src="img/ico1.gif" alt="" /></td>
<td>张晓星</td>
<td>女</td>
<td>45.60元</td>
</tr>
</table>
<table>
<tr>
<td style="text-align:left;height:28px;">
<span><input type="checkbox" id="chkAll" />全选</span>
<span><input type="button" id="btnDel" class="btn" value="删除" /></span>
</td>
</tr>
</table>
<img src="img/normal.png" alt="" id="imgTip" class="ClsImg" />
<script>
$(function(){
// var oBtn = document.getElementById('chkAll');
// var oBox = document.getElementsByTagName('input');
// oBtn.onclick = function(){
// for(var i=0;i<oBox.length;i++){
// if(oBox[i].checked = true){
// oBox[i].checked = false;
// }else{
// oBox[i].checked = true;
// }
// }
// };
$('table tr:nth-child(odd)').css('background','#EEE');
$('#chkAll').click(function(){
if(this.checked){
$('table tr td input[type=checkbox]').attr('checked',true);
}else{
$('table tr td input[type=checkbox]').attr('checked',false);
}
})
})
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
body{font-size: 12px;}
table{width:360px;border-collapse: collapse;}
table tr th,td{border:solid 1px #666;text-align:center;}
table tr td img{border:solid 1px #CCC;padding:3px;width:42px;height:60px;cursor:pointer;}
table tr td span{float:left;padding-left:12px;}
table tr th{background-color: #CCC;height:32px;}
.clsImg{position:absolute;border:solid 1px #CCC;padding:3px;width:85px;height:120px;background-color:#EEE;display:none;}
.btn{border:solid 1px #666;padding:2px;width:50px;}
</style>
</head>
<body>
<table>
<tr>
<th>选项</th>
<th>编号</th>
<th>封面</th>
<th>购书人</th>
<th>性别</th>
<th>购书价</th>
</tr>
<tr id="0">
<td><input type="checkbox" value="0" id="Checkbox1" /></td>
<td>1001</td>
<td><img src="img/loader_ico.gif" alt="" /></td>
<td>李晓明</td>
<td>男</td>
<td>36.60</td>
</tr>
<tr id="1">
<td><input type="checkbox" id="Checkbox2" value="1" /></td>
<td>1002</td>
<td><img src="img/ico2.gif" alt="" /></td>
<td>李明明</td>
<td>女</td>
<td>37.80元</td>
</tr>
<tr id="2">
<td><input type="checkbox" id="Checkboxq3" value="2" /></td>
<td>1003</td>
<td><img src="img/ico1.gif" alt="" /></td>
<td>张晓星</td>
<td>女</td>
<td>45.60元</td>
</tr>
</table>
<table>
<tr>
<td style="text-align:left;height:28px;">
<span><input type="checkbox" id="chkAll" />全选</span>
<span><input type="button" id="btnDel" class="btn" value="删除" /></span>
</td>
</tr>
</table>
<img src="img/normal.png" alt="" id="imgTip" class="ClsImg" />
<script>
$(function(){
// var oBtn = document.getElementById('chkAll');
// var oBox = document.getElementsByTagName('input');
// oBtn.onclick = function(){
// for(var i=0;i<oBox.length;i++){
// if(oBox[i].checked = true){
// oBox[i].checked = false;
// }else{
// oBox[i].checked = true;
// }
// }
// };
$('table tr:nth-child(odd)').css('background','#EEE');
$('#chkAll').click(function(){
if(this.checked){
$('table tr td input[type=checkbox]').attr('checked',true);
}else{
$('table tr td input[type=checkbox]').attr('checked',false);
}
})
})
</script>
</body>
</html>
