微客导航 » 文章资讯 » JS+CSS实现可以凹陷显示选中单元格的方法

JS+CSS实现可以凹陷显示选中单元格的方法

2024-04-03 22:14:03 358

本文实例讲述了JS+CSS实现可以凹陷显示选中单元格的方法。分享给大家供大家参考。具体实现方法如下：

<html>

<head>

<title>JS+CSS实现可以凹陷显示选中的单元格</title>

<style>

td{cursor:hand;font-size:12px}

.click{border-top:1pxsolid#0033CC;border-bottom:1pxsolid#DDEEFF;border-left:1pxsolid#0033CC;border-right:1pxsolid#DDEEFF;padding-top:5px;padding-bottom:3px;padding-left:5px;padding-right:3px;}

.hover{border-top:1pxsolid#DDEEFF;border-bottom:1pxsolid#0033CC;border-left:1pxsolid#DDEEFF;border-right:1pxsolid#0033CC;padding:4px;}

.normal{border:1pxsolid#FFFFFF;padding:4px;}

</style>

</head>

<body>

<script>

functionoverbutton(){

 if(src=event.srcElement)

 if(src.className=="normal"){

  src.className='hover';

 }

}

functionoutbutton(){

 if(src=event.srcElement)

 if(src.className=="hover"){

  src.className='normal';

 }

}

functionclickbutton(){

 if(src=event.srcElement)

 if(src.className=="hover"){

     varcells=document.all.button.rows[0].cells;

  for(i=0;i<cells.length;i++)

  {cells[i].className="normal";

  }

  src.className='click';

 }

}

document.onmouseover=overbutton document.onmouseout=outbutton document.onclick=clickbutton</script> <TABLEid=button> <TR> <TDclass=click>日报</TD> <TDclass=normal>周报</TD> <TDclass=normal>月报</TD> <TDclass=normal>季报</TD> <TDclass=normal>日报</TD> <TDclass=normal>周报</TD> <TDclass=normal>月报</TD> <TDclass=normal>季报</TD> </TR> </TABLE> </body> </html>

返回顶部
3162201930
czq8825@qq.com

JS+CSS实现可以凹陷显示选中单元格的方法

热门推荐

随机推荐