บทความนี้อธิบายถึงวิธีการที่ JS+CSS สามารถลดการแสดงผลของเซลล์ที่เลือก แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <html>
<head>
<title> การใช้งาน JS+CSS สามารถลดการแสดงเซลล์ที่เลือก </title>
<style>
TD {เคอร์เซอร์: Hand; Font-Size: 12px}
.Click {ชายแดนด้านบน: 1px Solid #0033cc; ขอบด้านล่าง: 1px Solid #DDEEFF; Border-Left: 1px Solid #0033cc; Border-Right: 1PX Solid #DDEEFF; Padding-Top: 5px; Padding-Bottom: 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 #FFFFF; Padding: 4px;}
</style>
</head>
<body>
<script>
ฟังก์ชั่น overbutton () {
if (src = event.srcelement)
if (src.className == "ปกติ") {
src.classname = 'hover';
-
-
ฟังก์ชั่น butbutton () {
if (src = event.srcelement)
if (src.classname == "hover") {
src.className = 'ปกติ';
-
-
ฟังก์ชั่น clickbutton () {
if (src = event.srcelement)
if (src.classname == "hover") {
var cells = document.all.button.rows [0] .cells;
สำหรับ (i = 0; i <cells.length; i ++)
{เซลล์ [i] .className = "ปกติ";
-
src.className = 'คลิก';
-
-
document.onmouseover = overbutton
document.onmouseout = ด้านนอก
document.onclick = clickbutton </script>
<ตาราง = ปุ่ม>
<tr>
<td class = คลิก> รายวัน </td>
<td class = ปกติ> รายงานรายสัปดาห์ </td>
<td class = ปกติ> รายงานรายเดือน </td>
<td class = ปกติ> รายงานรายไตรมาส </td>
<td class = ปกติ> รายวัน </td>
<td class = ปกติ> รายงานรายสัปดาห์ </td>
<td class = ปกติ> รายงานรายเดือน </td>
<td class = ปกติ> รายงานรายไตรมาส </td>
</tr>
</table>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน