zoukankan      html  css  js  c++  java
  • 表格复选框控制行高亮

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>表格复选框控制行高亮</title>
    <script src="jquery-1.4.2.js"></script>
    <script type="text/javascript">
    $(function(){

    $("tbody>tr:odd").addClass("odd");
    $("tbody>tr:even").addClass("even");

    $("tbody>tr").click(function(){
    if($(this).hasClass("selected"))
    {
    $(this).removeClass("selected").find(":checkbox").attr("checked",false);
    }
    else
    {
    $(this).addClass("selected").find(":checkbox").attr("checked",true);
    }

    });

    });
    </script>
    <style>
    .odd{background:#eee;}
    .even{background:#ff0;}
    .selected{background:red;}
    </style>

    </head>

    <body>
    <table border="1" cellpadding="0" cellspacing="0" width="100%">
    <thead>
    <tr>
    <th width="10%"></th><th width="30%">姓名</th><th width="30%">性别</th><th width="30%">暂住地</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td><input type="checkbox" checked/></td><td>11</td><td>22</td><td>33</td>
    </tr>
    <tr>
    <td><input type="checkbox" /></td><td>22</td><td>22</td><td>33</td>
    </tr>
    <tr>
    <td><input type="checkbox" /></td><td>33</td><td>22</td><td>33</td>
    </tr>
    <tr>
    <td><input type="checkbox" /></td><td>44</td><td>22</td><td>33</td>
    </tr>
    <tr>
    <td><input type="checkbox" /></td><td>55</td><td>22</td><td>33</td>
    </tr>
    <tr>
    <td><input type="checkbox" /></td><td>66</td><td>22</td><td>33</td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>

  • 相关阅读:
    数据库子句
    数据查询的语言
    试图
    Bootstrap 简介及引用方法
    一阶段项目整理
    js 鼠标移入移出
    js 鼠标点击事件
    轮播图
    滚动条 固定导航栏
    三元运算符 DOM找元素
  • 原文地址:https://www.cnblogs.com/ll-taj/p/5823018.html
Copyright © 2011-2022 走看看