zoukankan      html  css  js  c++  java
  • jquery 设置表格奇偶数的颜色和行被选中的颜色样式jquery 设置表格奇偶数的颜色和行被选中的颜色样式

    query 代码

    $(funtion(){
     //设置偶数行和奇数行
     $("tbody>tr:odd").addClass("ou");   //为奇数行设置样式(添加样式类)
     $("tbody>tr:even").addClass("dan");  // 为偶数行设置样式类
     $("tbody>tr:has(:checked)").addClass("ed");   //判断行是否被选中(返回布尔类型)添加样式类   // has(:checked)")   返回一个bool值  true/false

     // 搜索被选中 has(:checked)
     $('tbody>tr').click(function(){
      var hased = $(this).hasClass('ed');
     
      if(hased)
      {
             $(this).removeClass("ed").find(":input").attr("checked",false);
      }
      else
      {
     
          $(this).addClass("ed").find(":input").attr("checked",true);
      }

     });
          // 遍历指定触发函数

    })

    css 代码:

    <style type="text/css">
    table {border:0;border-collapse:collapse;}
    td {font:normal 12px/17px Arial;padding:2px;100px;}
    th {font:bold 12px/17px
       Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
    .dan {background:#FC0}
    .ou {background:#FFF}
    .ed {background:#669;color:#fff;}
    </style>

    HTML 代码

    <body>
       <table>
            <thead>
          <tr><th> </th><th>标题</th><th>时间</th><th>地点</th></tr>
      </thead>
      <tbody>
       <tr>
        <td><input type="checkbox" name="choice" value=""></td>
        <td>php100视屏1</td><td>2011</td><td>上海</td>
       </tr>
       <tr>
        <td><input type="checkbox" name="choice" value=""></td>
        <td>php100视屏2</td><td>2012</td><td>杭州</td>
       </tr>
       <tr>
        <td><input type="checkbox" name="choice" value=""></td>
        <td>php100视屏3</td><td>2011</td><td>济南</td>
       </tr>
       <tr>
        <td><input type="checkbox" name="choice" value=""></td>
        <td>php100视屏4</td><td>2012</td><td>北京</td>
       </tr>
       <tr>
        <td><input type="checkbox" name="choice" value=""></td>
        <td>php100视屏5</td><td>2011</td><td>武汉</td>
       </tr>
       <tr>
        <td><input type="checkbox" name="choice" value=""></td>
        <td>php100视屏6</td><td>2012</td><td>福州</td>
       </tr>
      
      </tbody>
      </table>
    </body>

  • 相关阅读:
    一句话开启XP_CMDSHELL
    CF14B Young Photographer 题解
    sql 存储过程与函数区别
    sql索引
    分区表中毒,重装系统
    面试
    XML范例的应用(转载)
    数据结构题目
    网页加载速度的方法和技巧
    设计模式分类
  • 原文地址:https://www.cnblogs.com/dodui/p/4963069.html
Copyright © 2011-2022 走看看