鼠标点击表格行背景变色
2006-05-16 00:59
369 查看
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>鼠标点击表格行背景变色</TITLE>
<style>
td{width:30px;height:30px;background-color:pink;}
</style>
</HEAD>
<BODY>
<table border=1 bordercolor="black" id="tb">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
<!--
var TD = tb.all.tags("TD");
var ObjTemp=null;
var eventColor={mouseover:"blue",mouseout:"pink",click:"red"};
for (var i=0;i<TD.length;i++){
TD(i).onmouseover=TdEvent;
TD(i).onmouseout =TdEvent;
TD(i).onclick =TdEvent;
}
function TdEvent(){
var obj = event.srcElement;
if (ObjTemp==obj) return;
obj.style.backgroundColor=eval("eventColor."+event.type);
if (event.type=="click") {
if (ObjTemp!=null)ObjTemp.style.backgroundColor="";
ObjTemp=obj;
}}
//-->
</SCRIPT>
</BODY>
</HTML>
[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>鼠标点击表格行背景变色</TITLE>
<style>
td{width:30px;height:30px;background-color:pink;}
</style>
</HEAD>
<BODY>
<table border=1 bordercolor="black" id="tb">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
<!--
var TD = tb.all.tags("TD");
var ObjTemp=null;
var eventColor={mouseover:"blue",mouseout:"pink",click:"red"};
for (var i=0;i<TD.length;i++){
TD(i).onmouseover=TdEvent;
TD(i).onmouseout =TdEvent;
TD(i).onclick =TdEvent;
}
function TdEvent(){
var obj = event.srcElement;
if (ObjTemp==obj) return;
obj.style.backgroundColor=eval("eventColor."+event.type);
if (event.type=="click") {
if (ObjTemp!=null)ObjTemp.style.backgroundColor="";
ObjTemp=obj;
}}
//-->
</SCRIPT>
</BODY>
</HTML>
[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]
相关文章推荐
- 鼠标点击表格行背景变色
- 实现 鼠标点击表格行背景变色,移开后点击另一行时另一行变色而前一行恢复原来的背景色
- 实现 鼠标点击表格行背景变色,移开后点击另一行时另一行变色而前一行恢复原来的背景色
- 鼠标点击表格行背景变色
- 鼠标点击表格行背景变色
- 鼠标移到隔行变色的表格上,有背景变化,并且点击的时候选中复选框和背景色
- 鼠标移上去背景变色和控制表格隔行变色代码
- 鼠标点击DIV后,DIV的背景变色(js)
- javascript表格操作大全:表格排序/倒序、动态添加列、批量删除、删除一行、隔行变色、鼠标悬浮切换背景色、全选/反选。(IE、火狐都兼容)
- 表格奇偶数背景颜色及鼠标点击效果
- 表格隔行换色+鼠标点击变色(改成JS版,IE7,FF,OPERQ测试通过)
- JavaScript表格隔行变色,鼠标移入表格展示背景颜色,鼠标移出颜色还原
- JQuery实现表格隔行换色,鼠标移动变色,点击选择变色
- 实现表格鼠标经过变色,点击变色并选中项目
- 表格隔行变色 加鼠标移入移出及点击效果
- javascript表格操作大全:表格排序/倒序、动态添加列、批量删除、删除一行、隔行变色、鼠标悬浮切换背景色、全选/反选。(IE、火狐都兼容)
- 鼠标点击当前行背景变色(附有指示图片)
- 超简单表格隔行换色+鼠标点击变色
- 点击按钮,表格隔行变色:偶数行为黄色背景,奇数行为默认颜色。通过table的getElementsByTagName取得所有的tr,依次遍历,如果是偶数就…………。
- tbColor("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景")