Блог

У меня есть следующая структура таблицы

 <table> 
 <tbody> 
  <tr> 
    <td>Lorem</td> <td>Ipsum</td> <td>Fierent</td> 
  </tr> 
  <tr> 
    <td>Lorem ipsum</td> <td>pro ut tale erant</td> <td>mnesarchum ne</td>
  </tr>
  <tr>
    <td >mnesarchum ne </td> <td >sapientem</td> <td >fierent mnesarchum </td> 
  </tr>
 </tbody>
</table>
  

Теперь я хочу выделить строку, на которой наведена мышь?
Итак, у меня есть 2 вопроса:

1. Как я могу добиться влияния выделения строки на вышеупомянутую структуру таблицы?
2. Как я могу вернуть эффект выделения, когда над строкой не наведен указатель мыши на перемещение?

Я использую jQuery 1.4 , поэтому, пожалуйста, предложите мне способ добиться следующего, используя код jQuery.

Я создал jsfiddle для того же:http://jsfiddle.net/c9h5w /

Спасибо.

Я бы добавил classname к строке, на которую в данный момент наводится курсор. Затем вы можете использовать CSS для оформления каждой ячейки таблицы в этой строке определенным цветом фона, например. Удаление стиля — это просто вопрос запуска mouseout события и удаления classname.

CSS:

 .hovered td {
    background: #ddd;
}
  

JavaScript:

 $('table tr').mouseover(function() {
    $(this).addClass('hovered');
}).mouseout(function() {
    $(this).removeClass('hovered');
});
  

Живой пример.

Проверьте это:

 $("table tr").hover(
            function(){
                $(this).css("background-color","#FFEFC6");
              //$(this).addClass('className'); //if ur working with class 
            },
            function(){
                $(this).css("background-color","");
              //$(this).removeClass('className'); //if ur working with class 
            }
        );
  

НАЖМИТЕ ЗДЕСЬ, ЧТОБЫ ПОСМОТРЕТЬ ДЕМОНСТРАЦИЮ