Выделение ячеек с одинаковыми классами в таблице
Здравствуйте!
Есть таблица содержащая в себе расписание. Необходимо сделать так, что бы при наведении на какую либо ячейку выделялась она и те которые имеют такой же класс.
<TABLE BORDER>
<TR>
<TD class="red">A</TD> <TD class="green">B</TD> <TD class="red">C</TD>
</TR>
<TR>
<TD class="green">D</TD class="red"> <TD>E</TD> <TD class="green">F</TD>
</TR>
</TABLE>
Очень прошу помочь написать скрипт который выделяет ячейки в таблице имеющие одинаковый класс. |
Вам в раздел Работа
|
для начала вам надо найти все td теги. это можно сделать разными способами:
document.getElementsByTagName document.getElementById document.querySelector document.querySelectorAll про эти методы вы можете почитать здесь http://learn.javascript.ru/searching-elements-dom потом вам на эти найденные теги надо навешать события onmouseover, почитать можете здесь http://learn.javascript.ru/mousemove-events а внутри нужно будет написать метод, но сделайте пока эти 2 пункта |
можно так
<!DOCTYPE HTML>
<html>
<head>
<style>
table {border: 1px solid;}
td {padding: 5px; cursor: pointer;}
.red { color: red; }
.green { color: green; }
.blue { color: blue; }
.red .red,
.green .green,
.blue .blue { background: silver}
</style>
</head>
<body>
<table>
<tr><td class=red>red</td><td class=green>green</td><td class=blue>blue</td></tr>
<tr><td class=green>green</td><td class=red>red</td><td class=blue>blue</td></tr>
<tr><td class=red>red</td><td class=blue>blue</td><td class=green>green</td></tr>
</table>
<script>
document.querySelector('table').onmouseover = function (e) {
this.className = e.target.className;
}
</script>
</body>
</html>
|
Большое спасибо
Всё работает, большущее Вам спасибо
|
| Часовой пояс GMT +3, время: 21:41. |