JS + CSS implementation can be used to show selected cells in a concave manner, jscss
This article describes how to use JS + CSS to display selected cells in a concave manner. Share it with you for your reference. The specific implementation method is as follows:
Copy codeThe Code is as follows: <Head>
<Title> JS + CSS implementation: displays selected cells in a concave drop </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 Report </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 help you design javascript programs.