js改变表格背景颜色

原贴:
http://club.pchome.net/2004/2/20/19_3774.php?rpcount=12
1。混合着做。
[html]<table width=200><tr>
<td bgcolor="#738278" style="cursor:hand" onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.background='#738278'">
移過來</td>
</tr></table>
[/html]

注意其中2个是不一样的。我懒不重复做两边了。
this.style.backgroundColor
this.style.background


2。用CSS做
[html]
<style>
td {洛林ASP菜鸟:expression(onmouseover=function(){this.bgColor='red'},onmouseout=function(){this.bgColor='green'})}
</style>
</head>
<body>
<table width=200><tr>
<td bgcolor="green">
移過來</td>
</tr></table>
</body>
[/html]

3。老样子,HTC,是少不了的。
<attach event="onmouseover" onevent="changebgcolor1()"/>
<attach event="onmouseout" onevent="changebgcolor2()"/>
<script language="Javascript">
function changebgcolor1(){
style.backgroundColor="#FF0000";
}

function changebgcolor2(){
style.backgroundColor="#e9f0f3";
}
</script>

并把它保存为renaski.HTC

然后在html中调用如下

<html>
<style>
td{ behavior:url(renaski.htc)}
</style>
<body bgcolor="#FFFFFF" text="#000000">
<center>
<table>
<tr>
<td>here </td>
<td>here </td>
<td>here </td>
<td>here </td>
</tr>
</table>
</center>
</body>
</html>


4。JS
[html]
<script for="ren" EVENT="onmouseover" language="javascript">
style.backgroundColor="#FF0000";
</script>
<script for="ren" EVENT="onmouseout" language="javascript">
style.backgroundColor="#e9f0f3";
</script>
<table width=200>
<tr>
<td id="ren" bgcolor="#e9f0f3">
移過來
</td>
</tr>
</table>
[/html]

5. vbscript
[html]
<script for="ren" EVENT="onmouseover" language="vbscript">
Window.Event.SrcElement.Style.BackgroundColor="#FF0000"
</script>
<script for="ren" EVENT="onmouseout" language="vbscript">
Window.Event.SrcElement.Style.BackgroundColor="#e9f0f3"
</script>
<table width=200>
<tr>
<td id="ren" bgcolor="#e9f0f3">
移過來
</td>
</tr>
</table>[/html]

不错,不过在CSS用expression(onmouseover..这类的会影响速度,还是觉得HTC实在啊

expression
建议不能用的过火,基本上CPU保持在50%左右(塞杨1.1G)

单元格变色。。适合整个表 顺便帖在这里吧。。。

循环遍历,效率不太高,不过觉得效果还可以

[html]
<style>
td{width:50}
</style>


<script defer>

var overcolor='#cccccc';
var outcolor='#f2f3f7';
var clkcolor='deeppink';

var pObj=null;
for (var i=0;i<phx.rows.length;i++){
for(var j=0;j<phx.rows.cells.length;j++){
phx.rows.cells[j].onmouseover=function(){
if(pObj!=this){
this.bgColor=overcolor;}}
phx.rows.cells[j].onmouseout=function(){
if(pObj!=this){
this.bgColor=outcolor;}}
phx.rows.cells[j].onclick=function(){
pObj=this;
init();
pObj.bgColor=clkcolor;}
}
}

function init(){
for (var i=0;i<phx.rows.length;i++){
for(var j=0;j<phx.rows.cells.length;j++){
phx.rows.cells[j].bgColor=outcolor;
}
}
}

init();

</script>


<table id=phx>
<tr><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td></tr></table>

[/html]


文章来自: 本站原创
Tags:
评论: 1 | 查看次数: 10959