您的位置:首页 > Web前端 > JQuery

Jquery实现table偶行变色

2015-03-28 10:43 141 查看
实现斑马玟效果,偶数行背景色为#FBFBFB 
html代码如下:
<table id="demo" class="ui-table">
<thead>
<tr>
<th style="width: 200px"><a id="createTime" href="javascript:void(0)">创建时间</a></th>
<th>交易号</th>
<th>金额</th>
<th>状态</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>2014-04-01 11:11</td>
<td>10000</td>
<td>$1128</td>
<td>有效</td>
<td>无</td>
</tr>
<tr>
<td>2014-04-05 12:11</td>
<td>10002</td>
<td>$1218</td>
<td>有效</td>
<td>无</td>
</tr>
<tr>
<td>2014-04-05 11:11</td>
<td>10003</td>
<td>$328</td>
<td>有效</td>
<td>无</td>
</tr>
<tr>
<td>2014-04-04 02:11</td>
<td>10004</td>
<td>$628</td>
<td>无效</td>
<td>无</td>
</tr>
<tr>
<td>2014-04-05 21:11</td>
<td>10005</td>
<td>$188</td>
<td>有效</td>
<td>无</td>
</tr>
</tbody>
</table>


Jquery代码如下:
window.onload = init;

function init(){
changeColors();//1.偶行变色

}

//偶行变色
function changeColors (){
var tr = $("#demo").find("tr");
var rowObj;
for(var i=1;i<tr.length;i++){//i从1开始,行头不算,不变色
rowObj = tr[2*i]; //得到偶数行
$(rowObj).css("background-color","#FBFBFB");//偶数行添加css样式更改背景色为#FBFBFB

}
}


效果如下:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery javascript color ui