首页写一个jquery程序，实现表格内容通过基本过滤器实现偶数行变色

写一个jquery程序，实现表格内容通过基本过滤器实现偶数行变色

时间: 2024-10-25 10:07:05 浏览: 12

当然可以。下面是一个简单的jQuery程序示例，它实现了对表格中偶数行颜色的变化： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Even Row Color Filter</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> .even-row { background-color: #f2f2f2; /* 可自定义偶数行背景色 */ } </style> <script> $(document).ready(function() { // 遍历表格的所有行 $('table tr').each(function(index) { // 如果索引是偶数，则给该行添加偶数行样式 if (index % 2 === 0) { $(this).addClass('even-row'); } else { // 如果不是偶数行则移除现有样式 $(this).removeClass('even-row'); } }); }); </script> </head> <body> <table id="exampleTable"> <tr><td>行1列1</td><td>行1列2</td></tr> <tr><td>行2列1</td><td>行2列2</td></tr> <tr><td>行3列1</td><td>行3列2</td></tr>  </table> </body> </html> ``` 在这个例子中，当页面加载完成后，jQuery会遍历`<table>`标签下的所有`<tr>`元素（即每一行）。如果行的索引是偶数（即2n），它会给这个行添加一个`.even-row`的CSS类，改变其背景颜色；如果不是偶数行，就会删除这个类，恢复默认样式。

阅读全文