<!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>Excel方式二维变色的提示表格</title>
<style type="text/css">
table{/*对表格进行设置*/
color:#565;
font:12px arial;}
td{/*对单元格进行控制*/
background-color:#dfc;
border-bottom:2px solid #B3DE94;
border-top:3px solid #FFFFFF;
padding:9px;}
td:hover,td.hover{/*鼠标经过td,发生的变化*/
background-color:#595;
color:#fff;}
</style>
</head>
<body>
<table summary="book list">
<caption>Book List</caption>
<tr>
<td>Tille</td>
<td>Id</td>
<td>Contry</td>
<td>price</td>
<td>Download</td>
</tr>
<tr>
<tr>
<td>Tom</td>
<td>5646555</td>
<td>china</td>
<td>$563</td>
<td>Download</td>
</tr>
<tr>
<td>Tom</td>
<td>5646555</td>
<td>china</td>
<td>$563</td>
<td>Download</td>
</tr>
<tr>
<td>Tom</td>
<td>5646555</td>
<td>china</td>
<td>$563</td>
<td>Download</td>
</tr>
<tr>
<td>Tom</td>
<td>5646555</td>
<td>china</td>
<td>$563</td>
<td>Download</td>
</tr>
</table>
<script language="javascript">
var cells=document.getElementsByTagName('td');
for (var i=0;i<cells.length;i++)//rows时一个行的数组，包含当前页中所有的行。
{
cells[i].οnmοuseοver=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].οnmοuseοut=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>
</html>
扫一扫
58
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
