이 기사에서는 JS+CSS가 선택된 세포의 디스플레이를 우울하게 할 수있는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<title> JS+CSS 구현은 선택된 셀을 표시 할 수 있습니다 </title>
<스타일>
TD {커서 : 손; 글꼴 크기 : 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; 패딩 바닥; 패딩-왼쪽 : 5px;}.
.Hover {Border-Top : 1px Solid #ddeeff; Border-Bottom : 1px solid #0033cc; Border-Left : 1px Solid #ddeeff; Border-Right : 1px Solid #0033cc; 패딩 : 4px;}
.normal {Border : 1px solid #fffff; 패딩 : 4px;}
</스타일>
</head>
<body>
<cript>
기능적으로 button () {
if (src = event.srcelement)
if (src.classname == "normal") {
src.classname = '호버';
}
}
함수 outbutton () {
if (src = event.srcelement)
if (src.classname == "호버") {
src.classname = '정상';
}
}
함수 ClickButton () {
if (src = event.srcelement)
if (src.classname == "호버") {
var cells = document.all.button.rows [0] .Cells;
for (i = 0; i <cells.length; i ++)
{셀 [i] .classname = "정상";
}
src.classname = '클릭';
}
}
document.onmouseOver = OverButton
문서 .OnMouseOut = OutButton
document.onclick = clickbutton </script>
<테이블 ID = 버튼>
<tr>
<td class = click> daily </td>
<td class = normal> 주간 보고서 </td>
<td class = 정상> 월간 보고서 </td>
<td class = 정상> 분기 별 보고서 </td>
<td class = normal> daily </td>
<td class = normal> 주간 보고서 </td>
<td class = 정상> 월간 보고서 </td>
<td class = 정상> 분기 별 보고서 </td>
</tr>
</테이블>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.