jQuery выделить строку таблицы

Мне нужно выделить строку таблицы на мыши. Кажется, что это достаточно легко, не так ли? Особенно с помощью jQuery. Но, увы, мне не повезло.jQuery выделить строку таблицы

Я тестировал различные решения для выделения строки таблицы, но ничего не похоже на работу :-(

Я проверил следующие сценарии:

// TEST one  
jQuery(document).ready(function() { 

    jQuery("#storeListTable tr").mouseover(function() { 
    $(this).parents('#storeListTable tr').toggleClass("highlight"); 
    alert('test'); // Just to test the mouseover event works 
    }); 

}); 

//TEST 2 
jQuery(document).ready(function() { 

    $("#storeListTable tbody tr").hover( 
    function() { // mouseover 
      $(this).addClass('highlight'); 
    }, 
    function() { // mouseout 
      $(this).removeClass('highlight'); 
    } 
    ); 
});

Это мой HTML-код

<html> 
    <head> 
    <title>Title</title> 
    <link rel="stylesheet" href="css/storeLocator.css" type="text/css" 
media="screen" charset="utf-8" /> 
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></ 
script> 
    </head> 
    <body> 

<table id="storeListTable"> 
    <thead> 
     <tr class="even"> 
     <th>ID</th> 
     <th>Navn</th> 
     <th>E-post</th> 
     <th>Nettside</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="" id="store1"> 
     <td>10</td> 
     <td>Boss Store Oslo</td> 
     <td> <a href="mailto:">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
     <tr class="" id="store3"> 
     <td>8</td> 
     <td>Brandstad Oslo City</td> 
     <td> <a href="mailto:[email protected]">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
     <tr class="even" id="store4"> 
     <td>7</td> 
     <td>Fashion Partner AS</td> 
     <td> <a href="mailto:[email protected]">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
     <tr class="" id="store5"> 
     <td>1</td> 
     <td>Follestad</td> 
     <td> <a href="mailto:[email protected]">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
     <tr class="even" id="store6"> 
     <td>2</td> 
     <td>Follestad</td> 
     <td> <a href="mailto:[email protected]">E-post</a></td> 
     <td> <a href="#">www</a></td> 
     </tr> 
    </tbody> 
    </table> 
    </body> 
</html>

Так .... может кто-нибудь дать мне толчок в правильном направлении?

UPDATE

Я не использую JQuery, чтобы выделить строки таблицы больше, но CSS.

Это для элементов списка, но я предполагаю, что это будет работать для строк таблицы, а также:

Ли: п-й ребенок (нечетные) {цвет фона: # f3f3f3; }

источник

2009-04-17 Steven

Попробуйте этот плагин http://p.sohei.org/jquery-plugins/columnhover/

Вот как вы его используете.

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $('#storeListTable').columnHover({ hoverClass:'highlight'}); 
    }); 
</script>

Позаботьтесь

источник

2009-04-18 06:04:27 AlteredConcept

Thanks mate. Это плагин, который я использовал. – Steven

работает, но старый. используйте метод background-color метода от Julian. примечание - т. е. сейчас около 1,5% (и сокращается) - и Mobile составляет около 7% (и растет), поэтому сосредоточиться на продвижении вперед легко: –

Действительно ли сообщение появляется, когда вы тестируете?

Если это так, возможно, проблема связана с вашим CSS. Мне потребовалось много времени, чтобы понять, что большинство стилей, применяемых к тэг-тегу, не имеют никакого эффекта. Так, в общем, вам нужно применить стили к каждому тд в строке

.highlight td {highlighted appearance}

вместо

.highlight {highlighted appearance}

источник

2009-04-17 09:36:33 wheresrhys

+1 wheresrhys. Используя правило фона на .highlight td, ваш «TEST 2» отлично работает для меня.

«ИСПЫТАНИЕ 1» не будет, из-за ненужного вызова parents().

источник

2009-04-18 05:03:44 bobince

Если вам не нужна поддержка IE6, подсветка может быть сделано с некоторыми простыми CSS:

#table tr:hover { 
    background-color: #ff8080; 
}

источник

2009-04-20 15:45:26 Julian

Это подход по умолчанию, который я использую сейчас (июнь 2012 г.) , Живи и учись :) – Steven

Однажды я нашел это решение - отлично работает - просто Добавить! К сожалению, я не знаю автора :(

<script type="text/javascript"> 

    $("#table_id").not(':first').hover(
     function() { 
      $(this).css("background","red"); 
     }, 
     function() { 
      $(this).css("background",""); 
     } 
    ); 

    </script>

источник

2011-07-12 20:31:29

Взгляните на эту How to highlight rows in a table on mouse hover?

источник

2012-05-30 09:27:39

Конечно, решение Юлиана с простой CSS является предпочтительным.Если вы хотите сделать это динамически в JavaScript, вы можете сделать это, как этот

$('#storeListTable').on('mouseenter','div',function(){$(this).css('background','white');}); 
$('#storeListTable').on('mouseleave','div',function(){$(this).css('background','');});

Если у вас есть больше дивов на строку, можно указать DIV, чтобы выделить, давая каждый класс строки = «строку» и ввод 'div.row' как второй аргумент on().

источник

2012-07-21 11:44:43 zevero

jQuery выделить строку таблицы

ответ

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