87,901
社区成员
发帖
与我相关
我的任务
分享
function HighLightOver()
{
HighLightList("#E0E6F7");
}
function HighLightOut()
{
HighLightList("");
}
// 高亮显示当前行
function HighLightList(color)
{
// 找对象
var el=event.srcElement;
var b=false;
var tabElement=null;
while (!b)
{
el=GetParentElement(el, "TR")
if (el)
{
tabElement=GetParentElement(el, "TABLE");
if (tabElement!=null && tabElement.className.toUpperCase()=="LIST")
{
break;
}
el=tabElement;
}
else
{
return;
}
}
// 行下的单元格对象进行高亮处理
for (var i=0;i<el.children.length;i++)
{
if(el.children[0].children[0].children[0].checked==false){
if (el.children[i].tagName=="TD")
{
el.children[i].style.backgroundColor=color;
}
}
}
}
// 取标签名相同的父对象
function GetParentElement(obj, tag)
{
while(obj!=null && obj.tagName!=tag)
obj=obj.parentElement;
return obj;
}
<table class="list" id="Table3" cellSpacing="1" align="center" border="0">
<tr>
<th>
姓名</th>
<th>
性别</th>
</tr>
<tr align="center">
<td align="center" valign="middle" onmouseover="HighLightOver()" onmouseout="HighLightOut()">
张三
</td>
<td align="center" valign="middle" onmouseover="HighLightOver()" onmouseout="HighLightOut()">
男
</td>
</tr>
<tr align="center">
<td align="center" valign="middle" onmouseover="HighLightOver()" onmouseout="HighLightOut()">
李四
</td>
<td align="center" valign="middle" onmouseover="HighLightOver()" onmouseout="HighLightOut()">
男
</td>
</tr>
<tr align="center">
<td align="center" valign="middle" onmouseover="HighLightOver()" onmouseout="HighLightOut()">
王五
</td>
<td align="center" valign="middle" onmouseover="HighLightOver()" onmouseout="HighLightOut()">
女
</td>
</tr>
</table>
<style type="text/css">
TABLE.List {
border:0px;
padding:4px;
width:98%;
background-color:#ffffff;
}
TABLE.List TH
{
height: 24px;
background-color:#799ae1;
font-size: 12px;
color: #ffffff;
}
TABLE.List TD
{
padding-left:5px;
line-height: 20px;
background-color:#d6dff7;
font-size: 12px;
}
</style>
<style type="text/css">
table.list tr:hover {
background: #66f;
}
</style>
</head>
<body>
<table class="list" id="Table3" cellSpacing="1" align="center" border="0">
<tr>
<th>
姓名</th>
<th>
性别</th>
</tr>
<tr align="center">
<td align="center" valign="middle">
张三
</td>
<td align="center" valign="middle">
男
</td>
</tr>
<tr align="center">
<td align="center" valign="middle">
李四
</td>
<td align="center" valign="middle">
男
</td>
</tr>
<tr align="center">
<td align="center" valign="middle">
王五
</td>
<td align="center" valign="middle">
女
</td>
</tr>
</table>