鼠标点击行，变色问题！！！！！！！！！！！请了！！

accpcj 2004-05-13 12:06:12
如何在以下代码的基础上
使表格行第一次点击时为色彩1，第二次点击时返回原色
并且可以使第一次点击行的颜色不变（就算鼠标移动到其它行并点击），直到第二次点击这一行时才返回原色！
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>table</TITLE>
<STYLE>
table
{
border-top:1px solid black;
border-left:1px solid black;
cursor:default;
}
td
{
border-bottom:1px solid black;
border-right:1px solid black;
height:23px;
}
</STYLE>
<SCRIPT language="javascript">
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 = "#CCCCFF";
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 = "#E1E9FD";
}
}

</SCRIPT>
</HEAD>

<BODY>
<TABLE id="table1" width="50%" border="0" cellpadding="0" cellspacing="0">
<TR style="background-color:#999999; border-bottom:2px solid black; height:25px" align="center">
<TD width="25%">one</TD>
<TD width="25%">two</TD>
<TD width="25%">three</TD>
<TD width="25%">four</TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
</BODY>
</HTML>
...全文
84 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
fason 2004-05-13
  • 打赏
  • 举报
 回复
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>table</TITLE>
<STYLE>
table
{
border-top:1px solid black;
border-left:1px solid black;
cursor:default;
}
td
{
border-bottom:1px solid black;
border-right:1px solid black;
height:23px;
}
</STYLE>
<SCRIPT language="javascript">
function change(el)
{
var x = el.rowIndex;
el.style.backgroundColor = ++d[x]%2 ? "#CCCCFF" : "#E1E9FD";
}

function out(el)
{
var x = el.rowIndex;
if (d[x]%2==0) el.style.backgroundColor = "";
}

function over(el)
{
var x = el.rowIndex;
if (d[x]%2==0) el.style.backgroundColor = "#E1E9FD";
}

</SCRIPT>
</HEAD>

<BODY>
<TABLE id="table1" width="50%" border="0" cellpadding="0" cellspacing="0">
<TR style="background-color:#999999; border-bottom:2px solid black; height:25px" align="center">
<TD width="25%">one</TD>
<TD width="25%">two</TD>
<TD width="25%">three</TD>
<TD width="25%">four</TD>
</TR>
<TR onMouseOver="over(this)" onClick="change(this)" onMouseOut="out(this)">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over(this)" onClick="change(this)" onMouseOut="out(this)">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over(this)" onClick="change(this)" onMouseOut="out(this)">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over(this)" onClick="change(this)" onMouseOut="out(this)">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over(this)" onClick="change(this)" onMouseOut="out(this)">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over(this)" onClick="change(this)" onMouseOut="out(this)">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over(this)" onClick="change(this)" onMouseOut="out(this)">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
<script>var d = new Array(document.getElementById("table1").rows.length);for(i=0;i<d.length;i++)d[i]=0</script>
</BODY>
</HTML>
rootcn 2004-05-13
  • 打赏
  • 举报
 回复
晚了：)
xkou 2004-05-13
  • 打赏
  • 举报
 回复
改好了

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>table</TITLE>
<STYLE>
table
{
border-top:1px solid black;
border-left:1px solid black;
cursor:default;
}
td
{
border-bottom:1px solid black;
border-right:1px solid black;
height:23px;
}
</STYLE>
<SCRIPT language="javascript">
function change()
{
var oObj = event.srcElement;

if(oObj.tagName.toLowerCase() == "td")
{
var oTr = oObj.parentNode;
oTr.style.backgroundColor =(oTr.style.backgroundColor.toLowerCase()=="#ccccff")?"":"#CCCCFF";
oTr.tag =(oTr.tag==true)?false: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 = "#E1E9FD";
}
}

</SCRIPT>
</HEAD>

<BODY>
<TABLE id="table1" width="50%" border="0" cellpadding="0" cellspacing="0">
<TR style="background-color:#999999; border-bottom:2px solid black; height:25px" align="center">
<TD width="25%">one</TD>
<TD width="25%">two</TD>
<TD width="25%">three</TD>
<TD width="25%">four</TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR onMouseOver="over()" onClick="change()" onMouseOut="out()">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
</BODY>
</HTML>
鼠标放到超链接上会七彩变色插件 for Discuz！7.0.rar
鼠标放到超链接上会七彩变色插件 for Discuz！7.0
鼠标点击和悬停时对表格行着色
鼠标点击和悬停时对表格行着色，通过CSS和JAVASCRIPT对表格的鼠标点击和悬停进行着色！
JavaScript实现鼠标点击导航栏变色特效
废话不多说了，直接给大家贴js实现鼠标点击导航栏变色代码，具体代码如下所示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...
输入框点击时边框变色效果的实现方法
实例如下： <!DOCTYPE ...<... <head>...输入框点击时边框变色效果</title> </head> <body> <style typ
javascript表格隔行变色加鼠标移入移出及点击效果的方法
本文实例讲述了javascript表格隔行变色加鼠标移入移出及点击效果的方法。分享给大家供大家参考。具体分析如下： ... 为了实现点击变色，鼠标移入移出时，颜色不被覆盖。   上代码: <!DOCTYPE html PUBLIC
JavaScript

87,909

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章