Home Web Front-end JS Tutorial JS CSS realizes the method of recessed display of selected cells_javascript skills

JS CSS realizes the method of recessed display of selected cells_javascript skills

May 16, 2016 pm 04:11 PM
css js Cell method selected

The 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:

Copy code The code is as follows:
<html>
<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.

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to recover deleted contacts on WeChat (simple tutorial tells you how to recover deleted contacts) How to recover deleted contacts on WeChat (simple tutorial tells you how to recover deleted contacts) May 01, 2024 pm 12:01 PM

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

What does placeholder mean in vue What does placeholder mean in vue May 07, 2024 am 09:57 AM

What does placeholder mean in vue

The secret of hatching mobile dragon eggs is revealed (step by step to teach you how to successfully hatch mobile dragon eggs) The secret of hatching mobile dragon eggs is revealed (step by step to teach you how to successfully hatch mobile dragon eggs) May 04, 2024 pm 06:01 PM

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 set font size on mobile phone (easily adjust font size on mobile phone) May 07, 2024 pm 03:34 PM

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) 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) May 07, 2024 pm 05:55 PM

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)

What does span mean in js What does span mean in js May 06, 2024 am 11:42 AM

What does span mean in js

What does rem mean in js What does rem mean in js May 06, 2024 am 11:30 AM

What does rem mean in js

How to introduce images into vue How to introduce images into vue May 02, 2024 pm 10:48 PM

How to introduce images into vue

See all articles