Jquery实现table偶行变色
2015-03-28 10:43
141 查看
实现斑马玟效果,偶数行背景色为#FBFBFB
html代码如下:
Jquery代码如下:
效果如下:
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实现点击table行变色且选中该行的radio
- jquery特效 table鼠标滑过变色的实现代码
- jquery实现table鼠标经过变色代码
- jquery实现table表的隔行变色功能
- jQuery实现table表格隔行换色鼠标经过变色
- jquery实现table鼠标经过变色代码
- jquery特效 table鼠标滑过变色的实现代码
- 用jquery技术实现table的奇数行变色
- jquery 实现鼠标移动到table每行,此行高亮变色
- jQuery实现table表格隔行换色鼠标经过变色
- jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
- jquery实现点击步骤条变色,以及点击下一步变色
- jQuery实现隔行变色的方法分析(对比原生JS)
- jQuery_review之table中根据行选中,进行背景变色和checkbox选中
- jquery实现隔行变色
- jQuery遍历实现隔行变色
- 使用jQuery实现table表格排序js插件
- jQuery插件实现表格隔行换色且感应鼠标高亮行变色
- jQuery+json实现动态创建复杂表格table的方法
- jQuery实现隔行背景色变色