<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<title>使用JQ完成表格隔行换色</title>
<script
src="js/jquery.min.js"></script>
<script>
$(function()
{
$("tbody
tr:odd").css("background-color","aquamarine")
$("tbody
tr:even").css("background-color","bisque")
var
tb
=
$("tbody
tr")
var
oldColor
for(var
i=0i<tb.lengthi++)
{
//alert(oldColor)
$("tbody
tr")[i].onmouseover
=
function()
{
oldColor
=
this.style.backgroundColor
this.style.backgroundColor
=
"yellow"
}
$("tbody
tr")[i].onmouseout
=
function()
{
this.style.backgroundColor
=
oldColor
}
}
})
</script>
</head>
<body>
<table
id="tbl"
border="1"
border-collapse="collapse"
align="center"
cellspacing="0"
cellpadding="5"
width="400"
height="20">
<thead>
<tr>
<th>编号</th><th>姓名</th><th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>张三</td><td>12</td>
</tr>
<tr>
<td>2</td><td>李四</td><td>22</td>
</tr>
<tr>
<td>3</td><td>王五</td><td>13</td>
</tr>
<tr>
<td>4</td><td>马六</td><td>14</td>
</tr>
<tr>
<td>5</td><td>伍六七</td><td>17</td>
</tr>
<tr>
<td>6</td><td>梅花十三</td><td>17</td>
</tr>
</tbody>
</table>
</body>
</html>
疑问：为什么this.style.backgroundColor
=
oldColor中的this不能用$("tbody
tr")[i]代替？？
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:jquery实现表格隔行换色效果jQuery插件实现表格隔行换色且感应鼠标高亮行变色使用jquery
hover事件实现表格的隔行换色功能示例基于Jquery的表格隔行换色，移动换色，点击换色插件
var rowIndex = -1 //选中行下标var colorIndex //选中行原背景色
var bgcolor //临时储存当前行原先的颜色
var color1 = "#CFDFFF" //交叉颜色1
var color2 = "#EFEFFF" //交叉颜色2
var onColor = "#FFEFBF" //鼠标行颜色
var selectColor = "#FFBFFF" //选中行颜色
window.onload = function () {
updateColor("tb", 1)
}
//参数（表格ID，跳过多少行头）
function updateColor(id, passRow) {
var tb = document.getElementById(id)
for (var i = passRow i < tb.rows.length i++) {
var row = tb.rows[i]
row.onmouseover = function () {
bgcolorOver(this)
}
row.onmouseout = function () {
bgcolorOut(this)
}
row.onclick = function () {
rowClick(this)
}
if (i % 2 == 0) {
row.style.backgroundColor = color1
} else {
row.style.backgroundColor = color2
}
}
}
function bgcolorOver(obj) {
if (rowIndex == obj.rowIndex) {
return
}
bgcolor = obj.style.backgroundColor
obj.style.backgroundColor = onColor
}
function bgcolorOut(obj) {
if (rowIndex == obj.rowIndex) {
return
}
obj.style.backgroundColor = bgcolor
}
function rowClick(obj) {
if (rowIndex != obj.rowIndex) {
if (rowIndex != -1) {
tb.rows[rowIndex].style.backgroundColor = colorIndex
}
rowIndex = obj.rowIndex
colorIndex = bgcolor
obj.style.backgroundColor = selectColor
}
} <table style="width:300px" id="tb">
<tr>
<td>1</td><td>A</td><td>a</td>
</tr>
<tr>
<td>2</td><td>B</td><td>o</td>
</tr>
<tr>
<td>3</td><td>C</td><td>e</td>
</tr>
</table>
