Строка таблицы подсветки jQuery - PullRequest
Новая
       39

Строка таблицы подсветки jQuery

5 голосов
/ 17 апреля 2009

Мне нужно выделить строку таблицы при наведении мыши. Похоже, это достаточно легко сделать, верно? Особенно с использованием 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:a@brandstad.no">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:b@fashionpartners.com">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:c@online.no">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:d@follestad.com">E-post</a></td> 
        <td> <a href="#">www</a></td> 
      </tr> 
    </tbody> 
  </table> 
  </body> 
</html>

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

ОБНОВЛЕНИЕ

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

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

li: nth-child (odd) {background-color: # f3f3f3; }

Ответы [ 7 ]

33 голосов
/ 20 апреля 2009

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

#table tr:hover {
  background-color: #ff8080;
}
9 голосов
/ 18 апреля 2009

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

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

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

Береги себя

5 голосов
/ 17 апреля 2009

При тестировании выдается предупреждение?

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

.highlight td {highlighted appearance}

вместо 

.highlight {highlighted appearance}
1 голос
/ 13 июля 2011

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

<script type="text/javascript">

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

    </script>
1 голос
/ 18 апреля 2009

+ 1 год. Использование фонового правила на .highlight td сделало ваш "Тест 2" хорошо для меня.

EST TEST 1 ’не будет из-за ненужного вызова parents().

0 голосов
/ 21 июля 2012

Конечно, решение Джулиана с простым CSS должно быть предпочтительным. Если вы хотите сделать это динамически в JavaScript, вы можете сделать это следующим образом 

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

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

0 голосов
/ 30 мая 2012
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...