js+css 动态改变表格效果

9708989

浏览: 50499 次
性别:
来自: 北京

最近访客更多访客>>

zhijin

shenht

theanswerli

mywang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javaScript

CSS JavaScript HTML

鼠标动态改变表格样式

当鼠标移动到某行表格时，改行颜色改变，当鼠标移开后颜色恢复，当鼠标点击后颜色加深，移开后依旧加深，当鼠标再次单击其他行时，被点击的行颜色改变，原来被点击的行颜色恢复。效果如下图所示。

实现代码如下：

------------------------------------

<HTML>

<HEAD>

<TITLE>table</TITLE>

<STYLE>

table

{

border-top:1px solid black;

border-left:1px solid black;

cursor:default;

}

{

border-bottom:1px solid black;

border-right:1px solid black;

height:23px;

}

</STYLE>

function change()

{

var oObj = event.srcElement;

if(oObj.tagName.toLowerCase() == "td")

{

var oTr = oObj.parentNode;

for(var i=1; i<document.all.table1.rows.length; i++)

{

document.all.table1.rows[i].style.backgroundColor = "";

document.all.table1.rows[i].tag = false;

}

oTr.style.backgroundColor = "#4169E1";

oTr.tag = true;

}

function out()

{

var oObj = event.srcElement;

if(oObj.tagName.toLowerCase() == "td")

{

var oTr = oObj.parentNode;

if(!oTr.tag)

oTr.style.backgroundColor = "";

}

function over()

{

var oObj = event.srcElement;

if(oObj.tagName.toLowerCase() == "td")

{

var oTr = oObj.parentNode;

if(!oTr.tag)

oTr.style.backgroundColor = "#B0E2FF";

}

</SCRIPT>

</HEAD>

<BODY>

<TD width="25%">three</TD>

</TR>

</TR>

</TR>

</TR>

</TR>

</TR>

</TR>

</TR>

</TABLE>

</BODY>

</HTML>

分享到：

java -- jdbc链接各种数据库 | js操作字符串

2009-09-26 14:53
浏览 3696
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论