Excel方式二维变色提示的表格

这是在前一文的基础上完成的，最终效果如图所示：

实现这一效果的完整代码如下：

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这里就不详细介绍了。