jQuery隔行换色和全选 /反选的实现

冷------

于 2020-08-18 08:54:22 发布

阅读量180

点赞数

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/YKYZSYA/article/details/108069168

版权

本文介绍了一种使用jQuery实现表格中奇数行和偶数行不同背景色的方法，同时提供了全选和反选表格中所有复选框的功能。通过简单的JavaScript函数，可以轻松地为网页表格添加美观的样式和实用的交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>奇数偶数 和 全选 /反选</title>
  <script type="text/javascript" src="js/jquery1.11.3.min.js" ></script>
  <script>
   $(function(){
    $("tr:even").css({background:'red'});
    $("tr:odd").css({background:'blue'});
   });
   //全选
   function checkAll(){
    $("table input").each(function()
     $(this).prop("checked","checked");
     // 操作 属性名 checked  ,并赋值为 checked
     //$(this).attr("checked","checked"); 低版本写法
    });
   }
   //反选
   function reverseCheck(){
    $("table input").each(function(){
     var value = $(this).prop("checked"); // 拿到所有input标签中  checked的值
     $(this).prop("checked",!value); // 取反操作
    });
   }
  </script>
 </head>
 <body>
  <table border="1">
   <tr>
    <td><input type="checkbox" value="1"></td>
    <td>鲁班大师</td>
    <td>250</td>
   </tr>
   <tr>
    <td><input type="checkbox" value="2"></td>
    <td>虞姬</td>
    <td>100</td>
   </tr>
   <tr>
    <td><input type="checkbox" value="3"></td>
    <td>公孙离</td>
    <td>30</td>
   </tr>
   <tr>
    <td><input type="checkbox" value="4"></td>
    <td>马岱</td>
    <td>1000</td>
   </tr>
  </table>
  <input type="button" value="全选" onclick="checkAll()">
  <input type="button" value="反选" onclick="reverseCheck()">
 </body>
</html>

jQuery隔行换色 和 全选 /反选的实现

jQuery隔行换色和全选 /反选的实现