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>
  • 相关阅读:
    python基础——反射
    python基础——模块
    python基础——异常处理、递归
    python基础——生成器与迭代器
    python基础——装饰器
    Python常见面试题
    Socket网络编程
    爬虫解析相关
    爬虫请求相关
    初识爬虫
  • 原文地址:https://www.cnblogs.com/dianzan/p/7372807.html
Copyright © 2011-2022 走看看