js实现table列表中的隔行变色
2016-08-08 18:10
357 查看
以下为js代码
<script type="text/javascript">
function SetTableColor() {
var trs = $("#tblMain tr"); //tblMain为table的id
for (var i = 0; i < trs.length; i++) {
var j = i + 1;
if (j % 2 == 0) { //偶数行
trs[i].style.background = "white"; //偶数行为白色
}
else {
trs[i].style.background = "#F0F0F0"; //集数行灰色
}
}
}
</script>
在页面body标签中引入相关js函数
以下为html页面代码:
<body onload="SetTableColor()">
<table id="tblMain ">
<tr>
<td>车牌号码</td>
<td>违章类型</td>
<td>扣分</td>
</tr>
<tr>
<td>粤c12345</td>
<td>闯红灯</td>
<td>2</td>
</tr>
<tr>
<td>粤B82325</td>
<td>超速</td>
<td>1</td>
</tr>
</table>
</body>
<script type="text/javascript">
function SetTableColor() {
var trs = $("#tblMain tr"); //tblMain为table的id
for (var i = 0; i < trs.length; i++) {
var j = i + 1;
if (j % 2 == 0) { //偶数行
trs[i].style.background = "white"; //偶数行为白色
}
else {
trs[i].style.background = "#F0F0F0"; //集数行灰色
}
}
}
</script>
在页面body标签中引入相关js函数
以下为html页面代码:
<body onload="SetTableColor()">
<table id="tblMain ">
<tr>
<td>车牌号码</td>
<td>违章类型</td>
<td>扣分</td>
</tr>
<tr>
<td>粤c12345</td>
<td>闯红灯</td>
<td>2</td>
</tr>
<tr>
<td>粤B82325</td>
<td>超速</td>
<td>1</td>
</tr>
</table>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery实现table表格隔行换色鼠标经过变色
- jQuery实现table表格隔行换色鼠标经过变色
- table+js实现网站左侧列表下拉隐藏
- JS实现隔行变色，鼠标移入高亮
- ajax+js+dom实现隔行变色效果
- JS小功能(列表页面隔行变色)简单实现
- js实现表格的全选，反选，删除所选行以及隔行变色
- js实现隔行换色及其鼠标滑过变色
- 关于table的td和ul元素li隔行变色的功能实现
- ajax+js+dom实现隔行变色效果
- js和JQeury实现隔行变色
- 可拖动拉伸的左右分栏效果，本例子是用Table以及JS来实现的，左右分栏可改变，拖动中间的边框就可实现宽度的调整，点击时可设置为隐藏左侧列表。
- css 实现table 隔行变色
- 用js实现隔行变色的效果
- js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等
- DataTable 递归 简单的程序，来实现无限级列表 结合 jquery.table.js 实现
- js实现表格隔行变色,鼠标在该行放上移走的变色效果,还有全选,反选等
- 纯JS代码实现隔行变色鼠标移入高亮
- JS与jQuery实现隔行变色的方法
- 一个简单的js实现的隔行变色脚本