表格隔行变色与鼠标滑过变色

来源：互联网发布：未来软件使用教程编辑：程序博客网时间：2024/04/19 06:25

最简单行之有效的方法：

onmouseover="this.style.backgroundColor='#f4f8fb'" onmouseout="this.style.backgroundColor='#ffffff'"

搜罗方法：

（1）用expression

鼠标滑过变色：

<!--

table { background-color:#000000; cursor:hand; width:100%; }

td {

onmouseover: expression(onmouseover=function (){this.style.borderColor ='blue';this.style.color='red';this.style.backgroundColor ='yellow'});

onmouseout: expression(onmouseout=function (){this.style.borderColor='';this.style.color='';this.style.backgroundColor =''});

background-color:#ffffff;

}

-->

</style>

<table>

</table>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－

简单的隔行变色：

<!--

tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")}

-->

</style>

<table>

</table>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

每个单元格变色：

<!--

tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}

td {background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))}

-->

</style>

<table>

</table>

－－－－－－－－－－－－－－－－－－－－－－－－

以上都用到expression，实现变得很方便，但是，经测试，在IE6（其它版本我不知道）上很正常，在firefox上无任何反应…… 表格隔行变色与鼠标滑过变色 - NanSen - NanSen 博客资料，要想在firefox上也有此效果，就要用第二种方法

（2）用JS

鼠标滑过变色：

window.onload=function showtable(){

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

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

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

li[i].style.backgroundColor="#FFB584";

li[i].onmouseover=function(){

this.style.backgroundColor="#FFFFFF";

}

li[i].onmouseout=function(){

this.style.backgroundColor="#FFB584"

}

</script>

</table>

－－－－－－－－－－－－－－－－－－－－－－－－

隔行变色：

window.onload=function showtable(){

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

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

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

if (i%2==0){

li[i].style.backgroundColor="#FFB584";

}else li[i].style.backgroundColor="#FFFFFF";

}

</script>

</table>

－－－－－－－－－－－－－－－－－－－－－－－－

以上都要用到JS，还需要table有个id，可以对指定的table操作，但是，假如遇到某人的firefox装了NoScript的话……可以无视了表格隔行变色与鼠标滑过变色 - NanSen - NanSen 博客资料

－－－－－－－－－－－－－－－－－－－－－－－－

隔行变色的鼠标经过变色

<html>

<head>

<title>隔行变色的鼠标经过变色</title>

table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}

table td {border:solid #999;border-width:0 1px 1px 0;}

.t1 {background-color:#fff;}

.t2 {background-color:#eee;}

.t3 {background-color:#ccc;}

</style>

var Ptr=document.getElementsByTagName("tr");

function recolor() {

for (i=1;i<Ptr.length+1;i++) {

Ptr[i-1].className = (i%2>0)?"t1":"t2";

}

window.onload=recolor;

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

Ptr[i].onmouseover=function(){

this.tmpClass=this.className;

this.className = "t3";

};

Ptr[i].onmouseout=function(){

this.className=this.tmpClass;

};

}

</script>

</head>

<body>

</table>

</body>

</html>

－－－－－－－－－－－－－－－－－－－－－－－－

表格隔行换色+鼠标点击变色

<html>

<head>

<title>表格隔行换色+鼠标点击变色</title>

#senfe {

width: 300px;

border-top: #000 1px solid;

border-left: #000 1px solid;

}

#senfe td {

border-right: #000 1px solid;

border-bottom: #000 1px solid;

}

--></style>

function senfe(o,a,b,c,d){

var t=document.getElementById(o).getElementsByTagName("tr");

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

t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;

t[i].onclick=function(){

if(this.x!="1"){

this.x="1";//本来打算直接用背景色判断，FF获取到的背景是RGB值，不好判断

this.style.backgroundColor=d;

}else{

this.x="0";

this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;

}

t[i].onmouseover=function(){

if(this.x!="1")this.style.backgroundColor=c;

}

t[i].onmouseout=function(){

if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;

}

--></script>

</head>

<body>

</table>

//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");

senfe("senfe","#fff","#ccc","#cfc","#f00");

--></script>

</body>

</html>

－－－－－－－－－－－－－－－－－－－－－－－－

鼠标放置后变色

<html >

<head>

<title> 鼠标放置后变色 </title>

<!--

//分别是奇数行默认颜色,偶数行颜色,鼠标放上时奇偶行颜色

var aBgColor = ["#FFFFFF","#f2faff","#FFFFCC","#FFFFCC"];

//从前面iHead行开始变色，直到倒数iEnd行结束

function addTableListener(o,iHead,iEnd)

{

o.style.cursor = "normal";

iHead = iHead > o.rows.length?0:iHead;

iEnd = iEnd > o.rows.length?0:iEnd;

for (var i=iHead;i<o.rows.length-iEnd ;i++ )

{

o.rows[i].onmouseover = function(){setTrBgColor(this,true)}

o.rows[i].onmouseout = function(){setTrBgColor(this,false)}

}

function setTrBgColor(oTr,b)

{

oTr.rowIndex % 2 != 0 ? oTr.style.backgroundColor = b ? aBgColor[3] : aBgColor[1] : oTr.style.backgroundColor = b ? aBgColor[2] : aBgColor[0];

}

window.onload = function(){addTableListener(document.getElementById("tbColor"),0,0);}

//-->

</script>

</head>

<body>

</table>

? : 问号和冒号是一起用的，叫条件运算符。

语法：

条件表达式 ? 真值 : 假值

这个表式式由三部分组成的，如果条件表达式的值为真，则整个表达式的值为“真值”的值，反之为“假值”的值。