• 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>

  • 相关阅读:
    Java入门
    Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8
    pypy3.8安装
    asyncio执行阻塞代码
    linux安装go
    python消费rabbitmq
    绑定进程到指定cpu运行
    负载均衡算法
    django版本规划
    FastAPI WebSocket 简单演示
  • 原文地址:https://www.cnblogs.com/dodui/p/4963069.html
Copyright © 2020-2023  润新知