这是在前一文的基础上完成的，最终效果如图所示：
实现这一效果的完整代码如下：
<style type="text/css">
table{
color:#565;
font:12px arial;
}
td{
border-bottom:2px solid #b3de94;
border-top:3px solid #fff;
padding:9px;
}
tr{
background-color:#dfc;
}
td.hover{
background-color:#595;
color:#fff;
}
</style>
</head>
<body>
<table summary="book list">
<caption>Book List</caption>
<tr>
<td>Title</td>
<td>ID</td>
<td>Country</td>
<td>Price</td>
<td>Download</td>
</tr>
<tr>
<td>Tom</td>
<td>13214585</td>
<td>Germany</td>
<td>﹩3.12</td>
<td>Download</td>
</tr>
<tr>
<td>Tom</td>
<td>13214585</td>
<td>Germany</td>
<td>﹩3.12</td>
<td>Download</td>
</tr>
<tr>
<td>Tom</td>
<td>13214585</td>
<td>Germany</td>
<td>﹩3.12</td>
<td>Download</td>
</tr>
<tr>
<td>Tom</td>
<td>13214585</td>
<td>Germany</td>
<td>﹩3.12</td>
<td>Download</td>
</tr>
</table>
<script language="javascript">
var cells=document.getElementsByTagName('td');
for (var i=0;i<cells.length;i++)
{
cells[i].onmouseover=function(){
this.className = 'hover';
//上变色
for (var j=0;j<cells.length;j++){
if(cells[j]==this){
cells[j%5].className= 'hover';
//左变色
cells[j-j%5].className= 'hover';
}
}
}
cells[i].onmouseout = function(){
this.className = '';
//上恢复
for (var j=0;j<cells.length;j++)
if(cells[j]==this){
cells[j%5].className ='';
//左恢复
cells[j-j%5].className ='';
}
}
}
</script>
</body>
这里运动到了，javascript这里就不详细介绍了。