鼠标滑过单元格,颜色改变,点击单元格,颜色也改变

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鼠标滑过单元格,颜色改变,点击单元格,颜色也改变相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<table >
<tr onmouseover="this.bgColor='#BDDFFF'" onmouseout="this.bgColor='#FFFFFF'" ">
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
<tr onmouseover="this.bgColor='#BDDFFF'" onmouseout="this.bgColor='#FFFFFF'" >
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr> <tr onmouseover="this.bgColor='#BDDFFF'" onmouseout="this.bgColor='#FFFFFF'" >
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
<tr onmouseover="this.bgColor='#BDDFFF'" onmouseout="this.bgColor='#FFFFFF'" >
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
</table>
</BODY>
</HTML>

鼠标滑过某一行,该行的颜色由白--蓝,现在我想实现:
当我单击,这行颜色白-蓝,并且你移走,仍为蓝色,而当你再点击其他行的时候,上一次点击的又变回白色,而新点击的变为蓝色
还望高手指点

参考技术A 单击事件是 onclick

要实现点一下变兰,再点一下变白的效果,
要接和javascript,对单击次数进行if判断。
这样 onmouseout就不用写了。

。。。代码稍后
参考技术B <tr
onclick="this.bgColor='#BDDFFF'"
onmouseout="this.bgColor='#FFFFFF'"
>
我再看看
参考技术C <tr onclick="this.bgColor='#BDDFFF'" onmouseout="this.bgColor='#FFFFFF'" >

我再看看
参考技术D <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
function changeColor(obj)
if(obj.id==document.getElementById("colorRowId").value)
return;

var tempStyle = obj.className;
if(document.getElementById("colorRowId").value!="")
var temp = document.getElementById("colorRowId").value;
var preStyle = document.getElementById("preStyle").value;
if(document.getElementById(temp).className!="style3")
if(preStyle=="green")
document.getElementById(temp).className = "green";
else
document.getElementById(temp).className = "";



if(obj.className!="style3")
obj.className = "style2";

document.getElementById("colorRowId").value = obj.id;
document.getElementById("preStyle").value = tempStyle;


function selectData(obj)
var tempSpreStyle=obj.className;
if(document.getElementById("sRowId").value!="")
var temp = document.getElementById("sRowId").value;
var sPreStyle = document.getElementById("sPreStyle").value;
if(sPreStyle=="green")
document.getElementById(temp).className = "green";
else
document.getElementById(temp).className = "";


obj.className = "style3";
document.getElementById("sPreStyle").value = document.getElementById("preStyle").value;

//-->
</script>
<style type="text/css">
<!--
.style2
background-color: #ffc02b;
color: #eeeeee;
font-size: 12px;

.style3
background-color: #ccc02b;
color: red;
font-size: 12px;

body
overflow:hidden;

-->
</style>

<input type="text" id="sPreStyle"/>
<input type="text" id="preStyle"/>
<input type="text" id="sRowId"/>
<input type="text" id="colorRowId"/>
<table >
<tr onmouseover="changeColor(this);" onclick="selectData(this);" id="tr_1">
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
<tr onmouseover="changeColor(this);" onclick="selectData(this);" id="tr_2">
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
<tr onmouseover="changeColor(this);" onclick="selectData(this);" id="tr_3">
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
<tr onmouseover="changeColor(this);" onclick="selectData(this);"id="tr_4">
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
</table>

</BODY>
</HTML>

还有点小问题,累了,你自己调试出来吧
第5个回答  推荐于2016-06-21 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<script type="text/javascript">
var oldobj;
function trclick(obj)
if(oldobj != null)
oldobj.bgColor="#FFFFFF";

oldobj = obj;
obj.bgColor='#BDDFFF';

function mouserout(obj)
if(oldobj == obj)
return;

obj.bgColor='#FFFFFF';

</script>
<table border=1>
<tr onmouseover="this.bgColor='#BDDFFF'" onmouseout=mouserout(this) onclick=trclick(this) >
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
<tr onmouseover="this.bgColor='#BDDFFF'" onmouseout=mouserout(this) onclick=trclick(this) >
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr> <tr onmouseover="this.bgColor='#BDDFFF'" onmouseout=mouserout(this) onclick=trclick(this) >
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
<tr onmouseover="this.bgColor='#BDDFFF'" onmouseout=mouserout(this) onclick=trclick(this) >
<td>aaaa</td>
<td>aaaa</td>
<td>aaaa</td>
</tr>
</table>

</BODY>
</HTML>

在你的基础上改了下就好了本回答被提问者采纳

easyui怎么给某一单元格,点击保存前后颜色改变

参考技术A 创建datagrid。
1、easyui点击保存后颜色改变从现在的表格元素创建Datagrid,在HTML中定义列、行和数据。
2、通过table标签创建DataGrid控件.在表格内使用th标签定义列。
3、使用Javascript去创建Datagrid控件。

以上是关于鼠标滑过单元格,颜色改变,点击单元格,颜色也改变的主要内容,如果未能解决你的问题,请参考以下文章

ag网格在单元格值改变时改变单元格颜色

DataGridViewLinkColumn单元格单击后,字体颜色改变

MFC list control 单击选择全行,这时整行颜色都变了,此时要改变某个单元格的颜色怎么做 已获得某行某列

表格中的部分字体改变颜色

EXCEL设置单元格颜色

EXCEL 鼠标移过得单元格颜色自动变色