zoukankan      html  css  js  c++  java
  • 使用jQuery实现光棒效果

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>使用jQuery实现光棒效果</title>
    <link href="4-1.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../jquery-1.11.2.js"></script>
    <script type="text/javascript">
    $(function(){
    $("#tbStudent tr:gt(0)").hover(
    function(){
    $(this).addClass("selected");
    },function(){
    $(this).removeClass("selected")
    }
    );
    //全选与反选
    $("#chkAll").click(function(){
    var checkedVal=$(this).attr("checked","checked");
    $(".chk").each(function(){
    var subchecked=$(this).attr("checked");
    if(subchecked!=checkedVal)
    $(this).click();
    });
    });
    });

    </script>.
    </head>

    <body>
    <table id="tbStudent">
    <tr>
    <th><input type="checkbox" id="chkAll" name="chkAll"/>全选</th>
    <th>学号</th><th>姓名</th><th>年龄</th><th>性别</th>
    </tr>
    <tr>
    <td><input type="checkbox" id="chk" class="chk"/></td>
    <td>S001</td><td>张三</td><td>22</td><td>男</td>
    </tr>
    <tr>
    <td><input type="checkbox" id="Checkbox1" class="chk"/></td>
    <td>S002</td><td>李四</td><td>22</td><td>女</td>
    </tr>
    <tr>
    <td><input type="checkbox" id="Checkbox2" class="chk"/></td>
    <td>S003</td><td>王五</td><td>22</td><td>男</td>
    </tr>
    <tr>
    <td><input type="checkbox" id="Checkbox3" class="chk"/></td>
    <td>S004</td><td>马六</td><td>22</td><td>男</td>
    </tr>
    <tr>
    <td><input type="checkbox" id="Checkbox4" class="chk"/></td>
    <td>S005</td><td>田七</td><td>22</td><td>女</ td>
    </tr>
    </table>
    </body>
    </html>

    @charset "utf-8";
    /* CSS Document */
    table{
    640px;
    border-collapse:collapse;
    }
    table th{
    border:solid 1px black;
    background-color:Gray;
    }
    table td{
    border:solid 1px black;
    }
    .highlight{
    background-color:Highlight;
    }
    .selected{
    background-color:Yellow;
    }

  • 相关阅读:
    HDU 6076
    HDU 6069
    ZOJ
    HDU
    斜率优化dp
    UVA 11752 The Super Powers
    poj 3761 bubble sort (排列组合)
    UVA 11174 Stand in a Line
    Caffe初学者第二部:Ubuntu16.04上安装caffe(CPU)+Matlab2014a+Opencv3的详细过程 (亲测成功, 20180529更新)
    Caffe初学者第一部:Ubuntu14.04上安装caffe(CPU)+Python的详细过程 (亲测成功, 20180524更新)
  • 原文地址:https://www.cnblogs.com/bsyx/p/4206342.html
Copyright © 2011-2022 走看看