jquery怎么设置表格奇偶行不同的颜色？

Love The Way You Lie 2023-10-03 19:22 38阅读 0赞

在[jQuery][]中使用“$("tr:odd").css("background-color","颜色")”与“$("\#tr:even").css("background-color","颜色")”即可设置表格奇偶行颜色不同。

一、jquery实现表格奇偶行不同颜色的代码：

//用CSS控制奇偶行的颜色

$(document).ready(function(){
    
    $("tr:odd").css("background-color", "#e6e6fa");
    
    $("#tr:even").css("background-color", "#fff0fa");
    
    }

:even 选择器选取每个带有偶数 index 值的元素(比如 2、4、6)。

:odd 选择器选取每个带有奇数 index 值的元素(比如 1、3、5)。

二、完整代码：

$(document).ready(function(){
    
    $("tr:odd").css("background-color","#B2E0FF");
    
    $("tr:even").css("background-color", "#fff0fa");
    
    });

三、Welcome to My Web Page

<table> 
 <tbody> 
 <tr> 
 <td> Id </td> 
 <td> LastName </td> 
 <td> FirstName </td> 
 <td> Address </td> 
 <td> City </td> 
 </tr> 
 <tr> 
 <td> 1 </td> 
 <td> Adams </td> 
 <td> John </td> 
 <td> Oxford Street </td> 
 <td> London </td> 
 </tr> 
 <tr> 
 <td> 2 </td> 
 <td> Bush </td> 
 <td> George </td> 
 <td> Fifth Avenue </td> 
 <td> New York </td> 
 </tr> 
 <tr> 
 <td> 3 </td> 
 <td> Carter </td> 
 <td> Thomas </td> 
 <td> Changan Street </td> 
 <td> Beijing </td> 
 </tr> 
 <tr> 
 <td> 4 </td> 
 <td> Obama </td> 
 <td> Barack </td> 
 <td> Pennsylvania Avenue </td> 
 <td> Washington </td> 
 </tr> 
 </tbody> 
</table>

四、效果如下：

![9a5ebc9536ae439081bc9e5fc5cdebcc.png][]

五、我的用法：

js代码：

//table表格样式

$(document).ready(function(){
      $("tr:odd").css("background-color","rgba(250, 252, 251, 1)"); 
      $("tr:even").css("background-color", "rgba(243, 245, 245, 1)");
     });

实现效果：

![fe74198acb574eb48e3a2155c50fbe03.png][]

[jQuery]: https://so.csdn.net/so/search?q=jQuery&spm=1001.2101.3001.7020
[9a5ebc9536ae439081bc9e5fc5cdebcc.png]: https://img-blog.csdnimg.cn/9a5ebc9536ae439081bc9e5fc5cdebcc.png
[fe74198acb574eb48e3a2155c50fbe03.png]: https://img-blog.csdnimg.cn/fe74198acb574eb48e3a2155c50fbe03.png