table tr鼠标滑动变化背景色,复选框全选

<html>
<head>
    <script language="javascript" src="./jquery.js" ></script>
    <title>JS获取上传文件的绝对路径,兼容IE和FF</title>
    <script>
$(function(){
 $(".datatable thead").addClass('title');
   $(".datatable tbody tr:even").addClass('even');//偶数行,从0开始
   $(".datatable tbody tr:odd").addClass('odd')//单数
 //鼠标滑过高亮
 $('.datatable tbody tr').bind('mouseover',function(){
  this.className='hover';
   }).bind('mouseout',function(){
  
   if(this.rowIndex%2==0){
         this.className='even';
        }else{
         this.className='odd'; 
        }
   
   });
})


//全选
function checkall(checkmainname,checkename)
{
    $(":checkbox[name='"+checkename+"']").attr("checked",$("#"+checkmainname).attr("checked"));
}

// 如果不是全部选中  全选取消选中  是全部选中 全选按钮选中
function childcheck(checkmainname,checkename)
{
   if($(":checkbox[name='"+checkename+"']:checked").length>=$(":checkbox[name='"+checkename+"']").length){
     $("#"+checkmainname).attr("checked","checked");
   }else{
     $("#"+checkmainname).removeAttr("checked");
    }
 } 
    </script>
<style type="text/css">
.title{ background:#00FF99;}
.even{ background: #ecf6fc; }
.odd{background:#E5ECF9}
.hover{ background:#4caee6; }
</style>
</head>
<body>
   
 
 <table width="100%" border="1" class="datatable">
  <thead>
  <tr>
    <th> <input type="checkbox" name="main" id="main" οnclick="checkall('main','child')" /></th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
  </tr></thead>
  <tbody>
  <tr>
    <td><input type="checkbox" name="child" value="${id}"
             οnclick="childcheck('main','child')" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="child" value="${id}"
             οnclick="childcheck('main','child')" />&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="child" value="${id}"
             οnclick="childcheck('main','child')" />&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="child" value="${id}"
             οnclick="childcheck('main','child')" />&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  </tbody>
</table>

</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值