Изменить цвет фона на две строки на mouseover

У меня есть довольно много строк данных в таблице, и я пытаюсь увидеть, можно ли выделить две строки одновременно с помощью мыши.Изменить цвет фона на две строки на mouseover

я могу сделать что-то вроде

<tr onmouseover="this.style.backgroundColor='#aaaaaa';" onmouseout="this.style.backgroundColor='#bbbbbb';">

, который прекрасно работает для одной строки в то время, но данные показываются в «паре», как показано ниже. Строки 1 и 2, 3 и 4. Поэтому я хочу посмотреть, могу ли я выделить строки 1 и 2 одновременно, когда я нажимаю кнопку мыши в любой строке. Тогда же для 3 и 4.

<tr><td>Row1</td></tr>
<tr><td>Row2</td></tr>

<tr><td>Row3</td></tr>
<tr><td>Row4</td></tr>

источник

2011-02-06 Sara

Используйте <tbody> теги сгруппировать пары строк вместе, вместе со стилем CSS :hover, чтобы установить цвет.

<html> 
    <style> 
     .foo:hover { background-color: #aaaaaa; } 
    </style> 
    <body> 
     <table> 
      <tbody class="foo"> 
       <tr><td>Row1</td></tr> 
       <tr><td>Row2</td></tr> 
      </tbody> 
      <tbody class="foo"> 
       <tr><td>Row3</td></tr> 
       <tr><td>Row4</td></tr> 
      </tbody> 
     </table> 
    </body> 
</html>

источник

2011-02-06 01:28:32 rmmh

Ahh perfect! Спасибо! – Sara

Это не работает! ['tbody' поддерживается только spottily] (http://reference.sitepoint.com/html/tbody). [Попробуйте посетить этот код] (http://jsbin.com/odiga5) в Firefox, например. –

Изменить цвет фона на две строки на mouseover

ответ

Смежные вопросы