Jquery tablesorter行懸停

Question

我需要一個片段來突出顯示一個表格行時，鼠標懸停。如果它有jquery tablesorter插件，我無法添加此功能。

Answer 1

要在表格中突出顯示的行，你可以使用：

$(document).ready(function() { 
    $("table").tablesorter(); 
    $('table tr').has(':not(th)').hover(
     function(){ 
      $(this).data('currColor',$(this).css('background-color')); 
      $(this).css('background-color','#cdd'); 
     }, 
     function(){ 
      $(this).css('background-color',$(this).data('currColor')); 
     } 
    ); 
}); 

http://jsfiddle.net/userdude/gjm6g/2/

Answer 2

沒有影響的tablesorter的zebra widget，你可以在的tablesorter添加一些額外的CSS/style.css中

table.tablesorter tr.even:hover td, 
table.tablesorter tr.odd:hover td { 
    background-color: blue; 
} 

Answer 3

你可以嘗試使用jQuery.Colorize插件和tablesorter。它可以讓你保留替代顏色。 http://jquerycolorize.blogspot.com/2012/01/how-to-use-tablesorter-plugin-with.html

順便說一句，如果你使用asp.net mvc，更好的選擇是使用MvcContrib Grid。

Answer 4

我想進一步分析行元數據&顯示覆蓋。我發現這個問題，但解決方案並沒有真正適用於tablesorter。我發現從這個2009年的博客文章工作的解決方案：通過創建的tablesorter插件

http://rogtopia.com/entries/jquery-js/tablesorter-hover-with-custom-widget

重新添加懸停。

<script type="text/javascript"> 
$(document).ready(function() { 
    // tablesorter widget to setup rollovers on table rows 
    $.tablesorter.addWidget({ 
     id: "hover", 
     format: function(table) { 
      $('tr',$(table)).mouseover(function() { 
       $(this).addClass('hover'); 
      }).mouseout(function() { 
       $(this).removeClass('hover'); 
      }); 
     } 
    }); 
    // then instantiate your tablesorter calling the hover widget 
    $('.tablesorter').tablesorter({widthFixed: true, widgets: ['hover'] }); 
}); 
</script>