基础页面显示 页面代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行换色</title> <script src="jquery-3.5.1.js"></script> <style> table{ margin: auto; width: 200px; border: 1px solid; } th,td{ text-align: center; } </style> </head> <body> <table> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> </tr> <tr> <td>5</td> <td>5</td> <td>5</td> </tr> </table> </body> </html>可以使用过滤选择器中的 :even 和 :odd 来获取奇偶行，并分别设置样式
$("tr:even").css("background-color","orange"); $("tr:odd").css("background-color","pink");显示效果 偶数行（索引为0 2 4）的背景色被改为橘色，奇数行（索引为1 3 5）的背景色被改为粉色 由于even和odd选择器是从索引为0开始计算，所以标题行的颜色也受到了影响 如果我们不想更改标题行的颜色，只对数据行的背景色进行更改，可以使用 :gt 选择器来选择索引大于0的 tr 对象
$("tr:gt(0):even").css("background-color","orange"); $("tr:gt(0):odd").css("background-color","pink");显示效果 使用 :gt 选择器后，对象集合的索引也发生了相应的变化 完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行换色</title> <script src="jquery-3.5.1.js"></script> <style> table{ margin: auto; width: 200px; border: 1px solid; } th,td{ text-align: center; } </style> <script> $(function () { $("tr:gt(0):even").css("background-color","orange"); $("tr:gt(0):odd").css("background-color","pink"); }) </script> </head> <body> <table> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> </tr> <tr> <td>5</td> <td>5</td> <td>5</td> </tr> </table> </body> </html>