表格行鼠标事件变色的例子
来源：互联网 发布：淘宝网官方网站羽绒服 编辑：程序博客网 时间：2024/05/05 09:43
表格行鼠标事件变色的例子
注：本文收藏自网络（猪飞飞's Blog），文责版权均为原作者所有，本人仅作收藏学习之用。
以下为引用：
以下为引用：
做一个表格列表中整行鼠标移动变色的效果,找了一段现成代码再改了一点,加上鼠标点击变色和再点击变回原色的效果.
一个N行N列的表格,实现鼠标移到某行变色,然后点击某一行使之固定一种颜色,再点使之返回原色.原理是使<tr>保持原色,鼠标事件对<tr>下的<td>样式背景色进行改变.同时可以设置避免变色事件的行,主要是针对标题行.相信这段代码对需要做项目比较多的数据列表的朋友有用,我在google和blueidea都找了一遍,没找到完全现成的.
具体请看js代码:
<HTML>
<HEAD>
<TITLE>变色表格</TITLE>
<style>
.c1{
background-color:#fff;
}
.c2{
background-color:#ccc;
}
#nc{
background-color:#000;
color:#fff;
}
</style>
<script>
var highlightcolor='#333';
//此处clickcolor只能用win系统颜色代码才能成功,如果用#xxxxxx的代码就不行,还没搞清楚为什么:(
var clickcolor='orange';
function changeto(){
source=event.srcElement;
if (source.tagName=="TR"||source.tagName=="TABLE")
return;
while(source.tagName!="TD")
source=source.parentElement;
source=source.parentElement;
cs = source.children;
//alert(cs.length);
if (cs[1].style.backgroundColor!=highlightcolor&&source.id!="nc"&&cs[1].style.backgroundColor!=clickcolor)
for(i=0;i<cs.length;i++){
cs[i].style.backgroundColor=highlightcolor;
}
}
function changeback(){
if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="nc")
return
if (event.toElement!=source&&cs[1].style.backgroundColor!=clickcolor)
//source.style.backgroundColor=originalcolor
for(i=0;i<cs.length;i++){
cs[i].style.backgroundColor="";
}
}
function clickto(){
source=event.srcElement;
if (source.tagName=="TR"||source.tagName=="TABLE")
return;
while(source.tagName!="TD")
source=source.parentElement;
source=source.parentElement;
cs = source.children;
//alert(cs.length);
if (cs[1].style.backgroundColor!=clickcolor&&source.id!="nc")
for(i=0;i<cs.length;i++){
cs[i].style.backgroundColor=clickcolor;
}
else
for(i=0;i<cs.length;i++){
cs[i].style.backgroundColor="";
}
}
</script>
</HEAD>
<BODY>
<div id='snwcwt'>
<table width="1400" border="0" cellspacing="1" cellpadding="1" onMouseover="changeto()" onMouseout="changeback()" onclick="clickto()">
<tr id="nc">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
</table>
</div>
</BODY>
</HTML>
<HEAD>
<TITLE>变色表格</TITLE>
<style>
.c1{
background-color:#fff;
}
.c2{
background-color:#ccc;
}
#nc{
background-color:#000;
color:#fff;
}
</style>
<script>
var highlightcolor='#333';
//此处clickcolor只能用win系统颜色代码才能成功,如果用#xxxxxx的代码就不行,还没搞清楚为什么:(
var clickcolor='orange';
function changeto(){
source=event.srcElement;
if (source.tagName=="TR"||source.tagName=="TABLE")
return;
while(source.tagName!="TD")
source=source.parentElement;
source=source.parentElement;
cs = source.children;
//alert(cs.length);
if (cs[1].style.backgroundColor!=highlightcolor&&source.id!="nc"&&cs[1].style.backgroundColor!=clickcolor)
for(i=0;i<cs.length;i++){
cs[i].style.backgroundColor=highlightcolor;
}
}
function changeback(){
if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="nc")
return
if (event.toElement!=source&&cs[1].style.backgroundColor!=clickcolor)
//source.style.backgroundColor=originalcolor
for(i=0;i<cs.length;i++){
cs[i].style.backgroundColor="";
}
}
function clickto(){
source=event.srcElement;
if (source.tagName=="TR"||source.tagName=="TABLE")
return;
while(source.tagName!="TD")
source=source.parentElement;
source=source.parentElement;
cs = source.children;
//alert(cs.length);
if (cs[1].style.backgroundColor!=clickcolor&&source.id!="nc")
for(i=0;i<cs.length;i++){
cs[i].style.backgroundColor=clickcolor;
}
else
for(i=0;i<cs.length;i++){
cs[i].style.backgroundColor="";
}
}
</script>
</HEAD>
<BODY>
<div id='snwcwt'>
<table width="1400" border="0" cellspacing="1" cellpadding="1" onMouseover="changeto()" onMouseout="changeback()" onclick="clickto()">
<tr id="nc">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
<tr class="c1">
<td>dddd</td>
<td>kkkk</td>
<td>kkkkk</td>
<td>kkkkk</td>
<td>kkkk</td>
</tr>
<tr class="c2">
<td>kkkk</td>
<td>kk</td>
<td>k</td>
<td>k</td>
<td>k</td>
</tr>
</table>
</div>
</BODY>
</HTML>
- 表格行鼠标事件变色的例子
- 表格行鼠标事件变色的例子
- Swing表格的渲染，鼠标悬浮行变色！
- Swing表格的渲染，鼠标悬浮行变色！
- swing表格的渲染，鼠标悬浮行变色
- 隔行换色并且鼠标指向行变色的表格
- 隔行换色并且鼠标指向行变色的表格
- 鼠标经过时变色的表格
- 鼠标滑过表格内的每个单元格变色，而不是整行变色。
- 鼠标点击表格行背景变色
- 鼠标点击表格行背景变色
- 鼠标移动,单击表格行变色
- 鼠标划过表格行变色效果JS
- 鼠标经过表格变色
- js的行变色的鼠标事件代码
- 表格变色例子
- HTML表格鼠标滑过变色 和奇数偶数行变色+点击变色
- 鼠标经过时，表格变色
- 面试中遇到的问题
- OnTrackDM6 in Linux
- 等差数列的一些公式(求和...)
- 以LinkedHashMap和ArrayList的结合使用，返回一个类似记录集的ArrayList
- 数据结构与算法基础
- 表格行鼠标事件变色的例子
- 学习数据结构的笔记(第一章)
- 使用GWT开发AJAX应用程序
- 将GWT工程部署到Tomcat中
- Ubuntu 6.10上安装Oracle 10g
- Reverse IP 网站
- 亮剑市场铸就成功
- 玫凯林原则
- 帝王管理之道
