تصف هذه المقالة الطريقة التي يمكن بها لـ JS+CSS أن تضغط على عرض الخلايا المحددة. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز كما يلي: <html>
<head>
<title> تنفيذ JS+CSS يمكن إعادة عرض خلايا محددة </title>
<style>
td {المؤشر: اليد ؛ الحجم الخط: 12px}
.click {border-top: 1px solid #0033cc ؛ border-bottom: 1px solid #ddeeff ؛ lorder-left: 1px solid #0033cc ؛ border-right: 1px solid #ddeef ؛ padde-top: 5px ؛ padding-bottom: 3px ؛ pad-left: 5px ؛
.hover {border-top: 1px solid #ddeeff ؛ border-bottom: 1px solid #0033cc ؛ lorder-left: 1px solid #ddeeff ؛ border-right: 1px solid #0033cc ؛ pading: 4px ؛}
.normal {الحدود: 1px solid #fffff ؛ padding: 4px ؛}
</style>
</head>
<body>
<script>
وظيفة overbutton () {
إذا (src = event.srcelement)
if (src.className == "Normal") {
src.className = 'hover' ؛
}
}
وظيفة Outbutton () {
إذا (src = event.srcelement)
if (src.className == "Hover") {
src.className = 'normal' ؛
}
}
وظيفة clickbutton () {
إذا (src = event.srcelement)
if (src.className == "Hover") {
var cells = document.all.button.Rows [0].
لـ (i = 0 ؛ i <cells.length ؛ i ++)
{الخلايا [i] .className = "Normal" ؛
}
src.className = 'click' ؛
}
}
document.onmouseover = overbutton
document.onmouseout = outbutton
document.onclick = clickbutton </script>
<جدول معرف = زر>
<tr>
<td class = click> Daily </td>
<td class = normal> التقرير الأسبوعي </td>
<td class = normal> التقرير الشهري </td>
<TD Class = Normal> تقرير ربع سنوي </td>
<td class = normal> يوميًا </td>
<td class = normal> التقرير الأسبوعي </td>
<td class = normal> التقرير الشهري </td>
<TD Class = Normal> تقرير ربع سنوي </td>
</r>
</table>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.