Jquery tablesorter row hover

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

tablesorter와 함께 jQuery.Colorize 플러그인을 사용해 볼 수도 있습니다. 대체 색상을 유지할 수 있습니다. http://jquerycolorize.blogspot.com/2012/01/how-to-use-tablesorter-plugin-with.html

Btw, asp.net mvc를 사용하는 경우 더 좋은 옵션은 MvcContrib Grid를 사용하는 것입니다.

Answer 4

행 메타 데이터를 더 자세히 분석하려면 & 오버레이를 표시하고 싶습니다. 이 질문을 발견했지만 솔루션은 실제로 tablesorter와 제대로 작동하지 않았습니다.

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

tablesorter에 위젯을 만들어 호버를 재 - 추가 :이 2009 블로그 게시물에서 작동하는 솔루션을 발견했다.

<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>