仿照Excel对选择的行列进行高亮代码,JS代码库,德仔网

代码语言

代码分类

【JS】仿照Excel对选择的行列进行高亮

作者:lxw出山小草 / 发布于2012/5/14/ 778

仿照Excel对选取的所在行所在列进行变色显示，易于用户查看行列数（如图分别为Excel和网页版的高亮显示行列）

<div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"></div>
<div><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿照Excel对选取的所在行所在列进行变色显示，易于用户查看行列数</title></div>
<div><style type="text/css">
table{
 color:#565;
 font:12px arial;
}
tr{
 background-color:#beb;
}
td{
 border-bottom:2px solid #B3DE94;
 border-top:3px solid #FFFFFF;
 padding:9px;
}
td.hover{
 background-color:#595;
 color:#fff;
}
</style></div>
<div></head></div>
<div><body>
 <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>123</td>
 <td>China</td>
 <td>$123</td>
 <td>Download</td>
 </tr>
 <tr>
 <td>Chance</td>
 <td>234</td>
 <td>Canada</td>
 <td>$234</td>
 <td>Download</td>
 </tr>
 <tr>
 <td>John</td>
 <td>345</td>
 <td>America</td>
 <td>$345</td>
 <td>Download</td>
 </tr>
 <tr>
 <td>Jenny</td>
 <td>456</td>
 <td>America</td>
 <td>$456</td>
 <td>Download</td>
 </tr>
</table></div>
<div><script language="javascript">
var cells = document.getElementsByTagName("td");
document.write("td"+cells.length);
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="" 
 }
 }
}
<div></script></div>
<div>
</body></div>
<div></html></div>
<div>
</div>

试试其它关键字

　高亮　

同语言下

可能有用的

lxw出山小草贡献的其它代码(5)