js改变选择的行颜色

最新推荐文章于 2022-09-07 23:53:22 发布

guoliwang

最新推荐文章于 2022-09-07 23:53:22 发布

阅读量2.7k

点赞数

分类专栏：所见及所得文章标签： function javascript border html table div

本文链接：https://blog.csdn.net/guoliwang/article/details/4761108

版权

所见及所得专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一

<html>

<script>

//点击当前选中行的时候设置当前行的颜色，同时恢复除当前行外的行的颜色及鼠标事件
function selectRow(target)
{
     var sTable = document.getElementById("ServiceListTable")
     for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行
     {
         if (sTable.rows[i] != target) //判断是否当前选定行
         {
             sTable.rows[i].bgColor = "#ffffff"; //设置背景色
             sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件
             sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件
         }
         else
         {
             sTable.rows[i].bgColor = "#d3d3d3";
             sTable.rows[i].onmouseover = ""; //去除鼠标事件
             sTable.rows[i].onmouseout = ""; //去除鼠标事件
         }
     }
}
//移过时tr的背景色
function rowOver(target)
{
    target.bgColor='#e4e4e4';
}
//移出时tr的背景色
function rowOut(target)
{
    target.bgColor='#ffffff';
}
//恢复tr的的onmouseover事件配套调用函数
function resumeRowOver()
{
    rowOver(this);
}
//恢复tr的的onmouseout事件配套调用函数
function resumeRowOut()
{
    rowOut(this);
}　　
</script>
<body>
<div style="width:50px;height:50px;background-color:Blue" οnmοuseοver="javascript:this.style.backgroundColor='red';"
οnmοuseοut="javascript:this.style.backgroundColor='blue'">
关于最后两个函数resumeRowOver和resumeRowOut为什么这样写参考我之前写的通过js 给页面元素添加事件
　　对应的表格HTMLview plaincopy to clipboardprint?
</div>

<table width="100%" border="1" cellspacing="1" cellpadding="0" id="ServiceListTable">
<tr>
<th>服务事项</th>
<th>N</th>
<th>状态</th>
<th>办结</th>
<th>资料</th>
</tr>
<tr οnmοuseοver="rowOver(this)" οnmοuseοut="rowOut(this)" οnclick="selectRow(this)">
<td>相关内容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr οnmοuseοver="rowOver(this)" οnmοuseοut="rowOut(this)" οnclick="selectRow(this)">
<td>相关内容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr οnmοuseοver="rowOver(this)" οnmοuseοut="rowOut(this)" οnclick="selectRow(this)">
<td>相关内容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr οnmοuseοver="rowOver(this)" οnmοuseοut="rowOut(this)" οnclick="selectRow(this)">
<td>相关内容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
</table>
</body>
</html>

二

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>澷??暥瀮</title>
</head>
<script language="JavaScript1.1">
var t2;
function check_trcolor(o)
{
if(t2)
{
   t2.bgColor='#CCCCCC';
   t2.style.color='';
}
o.bgColor='#CFE4FF';
o.style.color='#000000';
o.style.cursor='hand';
t2=o;
}
</script>
<body>
<table width="760" border="0" cellpadding="1" cellspacing="1">
   <tr onMouseOver="check_trcolor(this)" bgcolor="#CCCCCC">
     <td height="22" > </td>
   </tr>
   <tr onMouseOver="check_trcolor(this)" bgcolor="#CCCCCC">
     <td height="22"> </td>
   </tr>
   <tr onMouseOver="check_trcolor(this)" bgcolor="#CCCCCC">
     <td height="22"> </td>
   </tr>
   <tr onMouseOver="check_trcolor(this)" bgcolor="#CCCCCC">
     <td height="22"> </td>
   </tr>
</table>
</body>
</html>

guoliwang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js改变选择的行颜色

一 //点击当前选中行的时候设置当前行的颜色，同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) { var sTable = document.getElementById("ServiceListTable") for(var i=1;i<sTable.rows
复制链接

扫一扫