火红彩票

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

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

jquery实现表格奇偶行不同颜色的代码:

<script>  
//用CSS控制奇偶行的颜色  
$(document).ready(function(){
    $("tr:odd").css("background-color", "#e6e6fa");  
    $("#tr:even").css("background-color", "#fff0fa");  
} 
</scirpt>

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

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

完整代码:

<html>
<head>
    <script src="http://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript"> 
 
$(document).ready(function(){
    $("tr:odd").css("background-color","#B2E0FF");
    $("tr:even").css("background-color", "#fff0fa");
});
 
</script>   
 
</head>
<body>
<html>
<body>
<h1>Welcome to My Web Page</h1>

<table>
<tr>
<th>Id</th>
<th>LastName</th>

<th>FirstName</th>
<th>Address</th>
<th>City</th>
</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>

</table>

</body>
</html>
 
 
</body>
</html>

效果如下:

1.jpg

前端开发学习请关注HTML中文网

火红彩票以上就是jquery怎么设置表格奇偶行不同的颜色?的详细内容,更多请关注html中文网其它火红彩票相关的文章!

赞(0) 打赏
未经允许不得转载:html中文网火红彩票 » jQuery 答疑

评论 抢沙发

火红彩票前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

酷彩娱乐-主页 网易彩票-主页 铂金彩票-主页 广西快三-主页 澳客彩票-主页 富鱼彩票-主页 中华彩票网-主页 开心生肖-主页 开心中彩票-主页 甘肃体彩网-主页