Excel方式二维变色提示表格

根据上述的鼠标经过整行变色来继续进行改进，来实现似于Excel的行列的二维提示如图所示，当鼠标指针经过某一个单元格时，相应的列头和列头单元格会同时变色。

<style type="text/css">
table{
 color:#565;
 font:12px Arial, Helvetica, sans-serif;
 }
td{
 border-bottom:2px solid #b3de94;
 border-top:2px solid #fff;
 padding:9px;
 }
tr{
 background-color:#dfc;
 }
td:hover,td.hover{
 background-color:#595;
 color:#fff;
 }
</style>

<table summary="book list">
  <caption>Book List</caption>
     <tr>
         <td>Title</td>
         <td>ID</td>
         <td>Contry</td>
         <td>Price</td>
         <td>Download</td>
     </tr>
     <tr>
         <td>tom</td>
         <td>123456</td>
         <td>china</td>
         <td>$235</td>
         <td>Download</td>
     </tr>
     <tr>
         <td>tom</td>
         <td>123456</td>
         <td>china</td>
         <td>$235</td>
         <td>Download</td>
     </tr>
     <tr>
         <td>tom</td>
         <td>123456</td>
         <td>china</td>
         <td>$235</td>
         <td>Download</td>
     </tr>
     <tr>
         <td>tom</td>
         <td>123456</td>
         <td>china</td>
         <td>$235</td>
         <td>Download</td>
     </tr>
</table>

<script language="javascript">
var cells = document.getElementsByTagName('td');//rows是一个行的数组，包含当前页中的所有的行。
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>