zoukankan      html  css  js  c++  java
  • 制作一个表格,实现可以部分选中以及全选并且置灰背景

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset='UTF-8'>

    <style type="test/css">

    #table{

    color:green;

    margin:0 auto;

    300px;

    height:200px;

    font-weight:400px;

    font-size:large;

    text-align:center;}

    .select{

    background:rgba(50,50,50,0.5);

    }

    </style>

    <script src></script>

    </head>

    <body>

    <table id="table" border="1px solid blue" cellspacing='0' cellpadding='0'>

    <thead>

    <tr><th class="header"><input id="checkall" type="checkbox"name="checkall"/></th><th class=‘header‘>header</th><th class='header‘>header</th><th class='header‘>header</th>

    </thead>

    <tbody>

    <tr><td><input class='checklist' type='checkbox'  name='checklist'/></td><td>data</td><td>data</td><td>data</td>

    <tr><td><input class='checklist' type='checkbox'  name='checklist'/></td><td>data</td><td>data</td><td>data</td>

    <tr><td><input class='checklist' type='checkbox'  name='checklist'/></td><td>data</td><td>data</td><td>data</td>

    </tbody>

    </table>

    <script>

    $('body').on('click',table thead tr input[name="checkall"]',function(){

    if(this.checked){

    $('tbody input[name="checklist"]').prop('checked',$(this).prop('checked'));

    $('tbody tr').addClass('select');

    }else{

    $('tbody input[name="checklist"]').prop('checked',false);

    $('tbody tr').addClass('select');

    }

    });

    $('body').on('click','table tbody tr',function(){

    $(this).toggleClass('select');

    $(this).find('input[name='"checklist"]').prop('checked',$(this).hasClass('select');

    $('#checkall').prop('checked',$('.checklist').length==$('.checklist').filter(":checked").length);

    });

    </script>

    </body>

    </html>

  • 相关阅读:
    从零搭建一个IdentityServer——资源与访问控制
    职 工 养 老 保 险 转 移—陕西省外转入
    EurekaUser-Redis
    EurekaUser-返回类型和全局异常
    C# 入门实战系列文章
    Python入门实战系列文章
    Python基础之Scrapy简介
    Python办公自动化之文件合并
    Python基础之shutil及zipfile模块
    Python基础之os模块简介
  • 原文地址:https://www.cnblogs.com/sweeeper/p/6522381.html
Copyright © 2011-2022 走看看