鼠标滑过单元格,颜色改变,点击单元格,颜色也改变
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>
鼠标滑过某一行,该行的颜色由白--蓝,现在我想实现:
当我单击,这行颜色白-蓝,并且你移走,仍为蓝色,而当你再点击其他行的时候,上一次点击的又变回白色,而新点击的变为蓝色
还望高手指点
要实现点一下变兰,再点一下变白的效果,
要接和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控件。
以上是关于鼠标滑过单元格,颜色改变,点击单元格,颜色也改变的主要内容,如果未能解决你的问题,请参考以下文章
DataGridViewLinkColumn单元格单击后,字体颜色改变