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>

  • 相关阅读:
    Xilinx SelectIO资源的使用总结
    Altera usbblaster驱动无法安装的解决办法
    Xilinx FPGA的约束设计和时序分析总结
    OpenMANIPULATORX基本操作
    OpenMANIPULATORX ROS包安装 (Melodic)
    .xacro文件
    open_manipulator OpenCR代码解读
    OpenMANIPULATORX GUI
    ROS建模 urdf
    多机器人Gazebo仿真
  • 原文地址:https://www.cnblogs.com/dodui/p/4963069.html
Copyright © 2011-2022 走看看