当前位置：首页 > 资讯 > 技术文档

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

时间：2021-09-10 09:59 编辑：来源：阅读：
扫一扫，手机访问

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

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

<html>

<head>

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

<style>

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

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

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

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

</style>

</head>

<body>

<script>

function overbutton(){

 if(src=event.srcElement)

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

   src.className='hover';

  }

}

function outbutton(){

 if(src=event.srcElement)

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

   src.className='normal';

  }

}

function clickbutton(){

 if(src=event.srcElement)

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

      var cells=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>

<TABLE id=button>

<TR>

 <TD class=click>日报</TD>

 <TD class=normal>周报</TD>

 <TD class=normal>月报</TD>

 <TD class=normal>季报</TD>

 <TD class=normal>日报</TD>

 <TD class=normal>周报</TD>

 <TD class=normal>月报</TD>

 <TD class=normal>季报</TD>

</TR>

</TABLE>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

全部评论(0)

上一篇：JS绘制微信小程序画布时钟
下一篇：Javascript中将变量转换为字符串的三种方法

资讯排行榜
更多>>