java中表格隔行变色_【JavaWeb】TableDemo 表格隔行显色+鼠标悬停高亮显示

【普通表格-非隔行显色】

approach1

window.onload = function () {

//#-----非隔行显色---需要css辅助-------------------------------------------

function mouseover (){

var rows = document.getElementsByTagName('tr');//取得行

for(var i=0 ;i

{

rows[i].onmouseover = function(){//鼠标移上去,添加一个类'hilite'

this.className += 'hilite';

}

rows[i].onmouseout = function(){//鼠标移开,改变该类的名称

this.className = this.className.replace('hilite','');

}

}

}

需要CSS文件渲染颜色，#tbl 对应

#tbl tr:hover,#tbl tr.hilite

{

background-color:#009B63;

color:#ffffff;

}

Effect

approach2

window.onload = function () {

//#-----非隔行显色-----------------------------------------------------

function mouseover (){

$("tr").hover(

function() {

$(this).css("background", "#c8bfe7"); //鼠标移动上去的颜色

},

function() {

$(this).css("background", "#ffdfef"); //鼠标离开的颜色

}

);

}

}

Effect

approach3

window.onload = function () {

function mouseover (){

var tablename = document.getElementById("tbl");

var oRows = tablename.getElementsByTagName("tr");

for (var i = 0; i < oRows.length; i++) {

oRows[i].onmouseover = function() {

this.style.backgroundColor = "#ffa4a4";

}

oRows[i].onmouseout = function() {

this.style.backgroundColor = "#9dffff";

}

}

}

}

Effect

【表格隔行显色】

需要设置一个变量 [oldColor] 来保存该行原本的颜色

window.onload = function () {

//表格隔行显色，鼠标悬停高亮

function mouseover (){

//表格隔行显色，鼠标悬浮高亮显示

var oTab = document.getElementById('tbl');

var oldColor = '';//用于保存原来一行的颜色

for(var i = 0; oTab.tB