如果让鼠标滑过行，表格中有一个列的内容是相同的行同时高亮（变色）

表格就是普通的文章信息列表，数据是从数据库读出来的，如下：id   类型   标题
1    a     标题1
2    a     标题2
3    b     标题3
4    c     标题4
5    c     标题5
如何让鼠标经过id=1的行的，类型为a的行都同时高亮，移出时，取消高亮谢谢！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

看看这里的JS例子。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>TEST </title>
</head>
<style type="text/css">
body, td{font-family:Verdana; font-size:11px; color:#333333; font-weight:bold;}
</style>
<body>
<table width="100%"  border="0">
  <tr align="center">
    <td width="20%"><strong> id </strong></td>
    <td width="24%"><strong>类型</strong></td>
    <td width="56%"><strong>标题</strong></td>
  </tr>
  <tr align="center" onmouseover="javascript:chanCLR(this);" onmouseout="javascript:this.style.backgroundColor='';">
    <td> 1 </td>
    <td>a </td>
    <td>标题1</td>
  </tr>
  <tr align="center" onmouseover="javascript:chanCLR(this);" onmouseout="javascript:this.style.backgroundColor='';">
    <td> 2<br /></td>
    <td>a </td>
    <td>标题2 </td>
  </tr>
  <tr align="center" onmouseover="javascript:chanCLR(this);" onmouseout="javascript:this.style.backgroundColor='';">
    <td> 3<br /></td>
    <td> b </td>
    <td>标题3 </td>
  </tr>
  <tr align="center" onmouseover="javascript:chanCLR(this);" onmouseout="javascript:this.style.backgroundColor='';">
    <td> 4 <br /></td>
    <td>c </td>
    <td>标题4 </td>
  </tr>
  <tr align="center" onmouseover="javascript:chanCLR(this);" onmouseout="javascript:this.style.backgroundColor='';">
    <td> 5 </td>
    <td>c</td>
    <td> 标题5 </td>
  </tr>
</table>
<script language="javascript" type="text/javascript">
function chanCLR(obj)
{
//对哪个列的哪个值进行判断可以自己根据需要修改
if(obj.cells[0].innerHTML.replace(" ","")=="1" && obj.cells[1].innerHTML.replace(" ","")=="a")
   obj.style.backgroundColor="#99FF00";
}
</script>
</body>
</html>
<html>
<head>
    <title>test</title>
<script>
function aaa(obj){
var type = obj.nextSibling.innerText;
var trs = document.getElementById("t").rows;
for(var i=1;i<trs.length;i++){
if(trs(i).cells(1).innerText==type){
trs(i).bgColor = "ffff00";
}
}
}
function bbb(obj){
var trs = document.getElementById("t").rows;
for(var i=1;i<trs.length;i++){
trs(i).bgColor = "ffffff";
}
}
</script>
</head> <body>
<table id=t border=1>
  <tr>
    <td width="20%"> <strong> id </strong> </td>
    <td width="24%"> <strong>类型 </strong> </td>
    <td width="56%"> <strong>标题 </strong> </td>
  </tr>
  <tr>
    <td onmouseover="aaa(this)" onmouseout="bbb(this)"> 1 </td>
    <td>a</td>
    <td>标题1</td>
  </tr>
  <tr>
    <td onmouseover="aaa(this)" onmouseout="bbb(this)"> 2 </td>
    <td>a</td>
    <td>标题2</td>
  </tr>
  <tr>
    <td onmouseover="aaa(this)" onmouseout="bbb(this)"> 3 </td>
    <td>b</td>
    <td>标题3</td>
  </tr>
  <tr>
    <td onmouseover="aaa(this)" onmouseout="bbb(this)"> 4 </td>
    <td>c</td>
    <td>标题4 </td>
  </tr>
  <tr>
    <td onmouseover="aaa(this)" onmouseout="bbb(this)"> 5 </td>
    <td>c</td>
    <td>标题5</td>
  </tr>
</table>
</body>
</html>
我花了几分钟写了一个，但愿对你有帮助：<html>
<body>
<table width="90%" border="1" cellspacing="1" cellpadding="1" id="datatable">
<tr>
    <td>ID </td>
    <td>Type</td>
    <td>Title</td>
  </tr>
  <tr>
    <td>1</td>
    <td>a</td>
    <td>title1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>b</td>
    <td>title2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>a</td>
    <td>title3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>b</td>
    <td>title4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>a</td>
    <td>title5</td>
  </tr>
</table>
<script language="javascript" type="text/javascript">
var trs = document.getElementsByTagName('tr');
for(var i=1; i<trs.length; i++){
trs[i].onmouseover = function(){
this.style.backgroundColor = "#eee";
var _type = this.childNodes[1].childNodes[0].data;
for(var j=1; j<trs.length; j++){
if(trs[j].childNodes[1].childNodes[0].data==_type){
trs[j].style.backgroundColor = "#eee";
}
}
}
trs[i].onmouseout = function(){
for(var j=1; j<trs.length; j++){
trs[j].style.backgroundColor = "#fff";
}
}
}
</script>
</body>
</html>
这个不错,但最好限制一下表的id,否则一个页面有多个table,你的 var trs = document.getElementsByTagName('tr');
就会选中别的表
说得没错，所以代码稍微改动以下：<html>
<body>
<table width="90%" border="1" cellspacing="1" cellpadding="1" id="datatable">
<tr>
    <td>ID </td>
    <td>Type</td>
    <td>Title</td>
  </tr>
  <tr>
    <td>1</td>
    <td>a</td>
    <td>title1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>b</td>
    <td>title2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>a</td>
    <td>title3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>b</td>
    <td>title4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>a</td>
    <td>title5</td>
  </tr>
</table>
<script language="javascript" type="text/javascript">
  //在这里，现获取表格，再getElementsByTagName；
var tbl = document.getElementById('datatable');
var trs = tbl.getElementsByTagName('tr');
for(var i=1; i<trs.length; i++){
trs[i].onmouseover = function(){
this.style.backgroundColor = "#eee";
var _type = this.childNodes[1].childNodes[0].data;
for(var j=1; j<trs.length; j++){
if(trs[j].childNodes[1].childNodes[0].data==_type){
trs[j].style.backgroundColor = "#eee";
}
}
}
trs[i].onmouseout = function(){
for(var j=1; j<trs.length; j++){
trs[j].style.backgroundColor = "#fff";
}
}
}
</script>
</body>
</html>
请教一下，childNodes是什么？
所有子节点
比如tr.childNodes
获得的就是所有的TD
有个地方可能比较难以理解
trs[j].childNodes[1].childNodes[0].data这句，
trs[j].childNodes[1]这里将获得该tr的第2个td,td里面已经是文本了，但是在dom里面，文本也占用一个节点，是TextNode类型；
所以trs[j].childNodes[1].childNodes[0]将获得td的第1个孩子，也就是文本节点
用innerHTML比较保险，兼容多数IE ，包括MS，FF，NS等IE，而innerText对MS IE比较好，但FF或NS不是很好，有时不认识这个属性，3楼的这个光判断type,没有ID判断