


JS CSS realizes the method of recessed display of selected cells_javascript skills
May 16, 2016 pm 04:11 PMThe example in this article describes how to implement JS CSS to display the selected cells indentedly. Share it with everyone for your reference. The specific implementation method is as follows:
<head>
<title>JS CSS implementation can display the selected cell indented</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>Daily News</TD>
<TD class=normal>Weekly Report</TD>
<TD class=normal>Monthly report</TD>
<TD class=normal>Quarterly Report</TD>
<TD class=normal>Daily Report</TD>
<TD class=normal>Weekly Report</TD>
<TD class=normal>Monthly report</TD>
<TD class=normal>Quarterly Report</TD>
</TR>
</TABLE>
</body>
</html>
I hope this article will be helpful to everyone’s JavaScript programming design.

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to recover deleted contacts on WeChat (simple tutorial tells you how to recover deleted contacts)

The secret of hatching mobile dragon eggs is revealed (step by step to teach you how to successfully hatch mobile dragon eggs)

How to set font size on mobile phone (easily adjust font size on mobile phone)

How to choose a mobile phone screen protector to protect your mobile phone screen (several key points and tips for purchasing mobile phone screen protectors)
