比较高效的表格行背景变色及选定高亮JS

zoukankan html css js c++ java

比较高效的表格行背景变色及选定高亮JS

比较高效的表格行背景变色及选定高亮JS

下面这个例一摘录自：
http://blog.breakn.net/article.asp?id=447
例一：
//点击当前选中行的时候设置当前行的颜色，同时恢复除当前行外的行的颜色及鼠标事件
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);
}

页面测试表格：

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="ServiceListTable">
<tr>
<th>服务事项</th>
<th>N</th>
<th>状态</th>
<th>办结</th>
<th>资料</th>
</tr>
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
<td>相关内容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
<td>相关内容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
<td>相关内容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">
<td>相关内容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
</table>

例二：
上述为Row中添加效果，做适当修改，为每个Cell添加效果：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script language="javascript">
function selectCell(target) {
  var sTable = document.getElementById("table1")
  for(var i=0;i<sTable.rows.length;i++) {
   for(var j=0; j<sTable.rows[i].cells.length; j++) {
    if (sTable.rows[i].cells[j] != target) {
     sTable.rows[i].cells[j].bgColor = "#ffffff";
     sTable.rows[i].cells[j].onmouseover = resumeCellOver;
     sTable.rows[i].cells[j].onmouseout = resumeCellOut;
    }
    else {
     sTable.rows[i].cells[j].bgColor = "#d3d3d3";
     sTable.rows[i].cells[j].onmouseover = "";
     sTable.rows[i].cells[j].onmouseout = "";
    }
   }
  }
}

function cellOver(target) {
  target.bgColor='#e4e4e4';
}

function cellOut(target) {
  target.bgColor='#ffffff';
}

function resumeCellOver() {
  cellOver(this);
}

function resumeCellOut() {
  cellOut(this);
}
</script>
</head>
<body>
<table align="center" width="200" height="200" border="1" cellspacing="0" cellpadding="0" id="table1">
  <tr>
   <td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>
   <td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>
   <td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>
   <td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>
  </tr>
  <tr >
   <td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)"> </td>
   <td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)"> </td>
   <td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)"> </td>
   <td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)"> </td>
  </tr>
  <tr>
   <td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>
   <td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>
   <td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>
   <td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>
  </tr>
  <tr>
   <td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)"> </td>
   <td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)"> </td>
   <td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)"> </td>
   <td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)"> </td>
  </tr>
</table>
</body>
</html>

查看全文

相关阅读:
【日语】日语学习计划(转载)
【日语】日语商务情景口语
 Nop常用知识点
 c#版在pc端发起微信扫码支付
 nopcommerce 常用属性验证
 @codeforces
@codeforces
@codeforces
@codeforces
@codeforces

原文地址：https://www.cnblogs.com/tangself/p/1618465.html