Форум

AnsiAnsi · #1 (**permalink**) 15.09.2014, 09:59

Здравствуйте!
Есть таблица содержащая в себе расписание.
Необходимо сделать так, что бы при наведении на какую либо ячейку выделялась она и те которые имеют такой же класс.

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

Очень прошу помочь написать скрипт который выделяет ячейки в таблице имеющие одинаковый класс.

Viral · #2 (**permalink**) 15.09.2014, 10:25

Вам в раздел Работа

skrudjmakdak · #3 (**permalink**) 15.09.2014, 10:38

для начала вам надо найти все td теги. это можно сделать разными способами:

document.getElementsByTagName
document.getElementById
document.querySelector
document.querySelectorAll

про эти методы вы можете почитать здесь http://learn.javascript.ru/searching-elements-dom

потом вам на эти найденные теги надо навешать события onmouseover, почитать можете здесь http://learn.javascript.ru/mousemove-events

а внутри нужно будет написать метод, но сделайте пока эти 2 пункта

Pavel M. · #4 (**permalink**) 15.09.2014, 23:48

можно так

<!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>

AnsiAnsi · #5 (**permalink**) 16.09.2014, 09:45

Всё работает, большущее Вам спасибо

Форум

Справочник

Discord чат

Курсы javascript