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>

  • 相关阅读:
    其他技术----mongoDB基础
    redis学习----Redis入门
    网络通信学习----HTTP请求方法
    spring boot 学习 ---- spring boot admin
    java拓展----(转)synchronized与Lock的区别
    spring boot 学习 ---- spring MVC
    解决ubuntu的apt-get命令被占用
    阴暗
    图像分割实战-视频背景替换
    「知乎」你们觉得响应式好呢,还是手机和PC端分开来写?
  • 原文地址:https://www.cnblogs.com/dodui/p/4963069.html
Copyright © 2011-2022 走看看