<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格高亮</title>
<style type="text/css">
body{
font-size:8pt;
font-family: sans-serif;
margin:0px;
padding:0px;
}
img{
border:0px;
}
thead td{
font-weight:bold;
color:#000;
background-color:#E2EBED;
}
td{
padding:2px 4px;
}
table{
border:1px solid #000;
border-collapse: collapse;
}
table,h1,p,#ads{
margin-left:10px;
}
#ads{
margin-top:20px;
}
.tableRollOverEffect1{
background-color:#317082;
color:#FFF;
}
.tableRollOverEffect2{
background-color:#000;
color:#FFF;
}

.tableRowClickEffect1{
background-color:#F00;
color:#FFF;
}
.tableRowClickEffect2{
background-color:#00F;
color:#FFF;
}
.differ{ background-color: #fffee9; }
</style>
<script type="text/javascript">
var tablehighlightEffect = {
arrayOfRolloverClasses: [],
arrayOfClickClasses:[],
activeRowClickArray:[],
activeRow:false,
highlightTableRow: function()
{
var o = tablehighlightEffect;
var tableObj = this.parentNode;
if(tableObj.nodeName != 'table') tableObj = tableObj.parentNode;
if(this != o.activeRow){
this.setAttribute('origCl',this.className);
this.origCl = this.className;
}
this.className = o.arrayOfRolloverClasses[tableObj.id];
o.activeRow = this;
},
clickOnTableRow: function()
{
var o = tablehighlightEffect;
var tableObj = this.parentNode;
if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;
if(o.activeRowClickArray[tableObj.id] && this != o.activeRowClickArray[tableObj.id]){
o.activeRowClickArray[tableObj.id].className = '';
}
this.className = o.arrayOfClickClasses[tableObj.id];
o.activeRowClickArray[tableObj.id] = this;
},
resetRowStyle: function()
{
var o = tablehighlightEffect;
var tableObj = this.parentNode;
if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;
if(o.activeRowClickArray[tableObj.id] && this == o.activeRowClickArray[tableObj.id]){
this.className = o.arrayOfClickClasses[tableObj.id];
return;
}
var origCl = this.getAttribute('origCl');
if(!origCl)origCl = this.origCl;
this.className=origCl;
},
addTableRolloverEffect: function(tableId,whichClass,whichClassOnClick)
{
var o = tablehighlightEffect;
o.arrayOfRolloverClasses[tableId] = whichClass;
o.arrayOfClickClasses[tableId] = whichClassOnClick;
var tableObj = document.getElementById(tableId);
var tBody = tableObj.getElementsByTagName('tbody');
var rows = (tBody[0] || tableObj).getElementsByTagName('tr');
for(var no=0;no<rows.length;no++)
{
rows[no].onmouseover = o.highlightTableRow;
rows[no].onmouseout  = o.resetRowStyle;
if(whichClassOnClick){ rows[no].onclick = o.clickOnTableRow;}
}

}
}
</script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Position</td>
<td>Income</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>37</td>
<td>Managing director</td>
<td>90.000</td>
<td>Male</td>
</tr>
<tr>
<td>Susan</td>
<td>34</td>
<td>Partner</td>
<td>90.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>29</td>
<td>Head of production</td>
<td>70.000</td>
<td>Male</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
tablehighlightEffect.addTableRolloverEffect('myTable','tableRollOverEffect1','tableRowClickEffect1');
tablehighlightEffect.addTableRolloverEffect('myTable2','tableRollOverEffect2','tableRowClickEffect2');
</script>
</body>
</html>代码如上:错误提示:var tBody = tableObj.getElementsByTagName('tbody');
这句出错Error:'null' 为空或不是对象麻烦高手解决一下!谢谢