var defaultColor="#112233"
$(function(){
$("table tr").each(i){
if(i<5)
{
$(this).css("background-color","#112233")//前五行颜色
}
else
{
$(this).css("background-color","#223344")//五行之后的颜色
}
$("table tr").hover(function(){
defaultColor=$(this).css("background-color")
$(this).css("background-color","#334455")//鼠标移到的颜色
},function(){
$(this).css("background-color",defaultColor)//鼠标移出的颜色，恢复默认颜色
})
}
})
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>
