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>

  • 相关阅读:
    open文件操作之mode模式剖析
    super函数没有那么简单-super原理剖析
    mac下 将python2.7改为python3
    《图解http》构建Web内容的技术
    《图解HTTP》Web的攻击技术
    java获取服务器信息
    免费的论文查重网站
    gitlab持续集成,自动部署
    mybatis-plus invalid bound statement (not found) insert解决办法
    锁原理:偏向锁、轻量锁、重量锁
  • 原文地址:https://www.cnblogs.com/dodui/p/4963069.html
Copyright © 2011-2022 走看看