zoukankan      html  css  js  c++  java
  • Jquery 组 checkbox双向控制与tr变色


    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>

    table{
    border:1px solid #000;
    400px;
    text-align: center;
    border-collapse: collapse;
    }
    thead tr{
    border: 1px solid #000;
    }
    .selected{
    background:red;
    }
    </style>
    </head>
    <body>
    <table>
    <thead>
    <tr>
    <th></th>
    <th>姓名</th>
    <th>性别</th>
    <th>暂住地</th>
    </tr>
    </thead>
    <tbody>
    <tr><td><input id="d1" type="checkbox"/></td><td>张山1</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td><input id="d2" type="checkbox"/></td><td>张山2</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td><input id="d3" type="checkbox"/></td><td>张山3</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td><input id="d4" type="checkbox"/></td><td>张山4</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td><input id="d5" type="checkbox"/></td><td>张山5</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td><input id="d6" type="checkbox"/></td><td>张山6</td><td>男</td><td>浙江宁波</td></tr>
    </tbody>
    </table>
    </body>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
    //jquery有一些弊病,checked这样的是没有属性值的,不能用attr("checked",true)
    $(function(){
    $('tbody>tr').click(function(){
    var $thisonly=$(this);
    if($thisonly.hasClass('selected')){
    $thisonly.removeClass('selected');
    $thisonly.find(':checkbox')[0].checked=false;
    }else{
    $thisonly.addClass('selected').siblings().removeClass('selected');
    $thisonly.find(':checkbox')[0].checked=true;
    $('table :checkbox:checked').parent().parent().addClass('selected');
    }
    }
    )
    })
    </script>
    </html>
  • 相关阅读:
    DHT(Distributed Hash Table) Translator
    Introducing shard translator
    【转】shell脚本中echo显示内容带颜色
    javac 错误: 编码GBK的不可映射字符
    一致性哈希(consistent hashing)
    在bash shell中使用getfattr查看文件扩展属性
    css3在不同型号手机浏览器上的兼容一览表
    META是什么意思?
    JS异步加载的三种方式
    AJAX中的同步加载与异步加载
  • 原文地址:https://www.cnblogs.com/dianzan/p/7372807.html
Copyright © 2011-2022 走看看