jQuery tablesorter, zebra striping 및 행 하이라이팅 통합

Question

이 글을 여러 번 작성하고 다시 작성해 보았습니다. 간단하고 간결하게 "관련있는"배경을 포함하고 있습니다. 행운을 빕니다, 그래서 나는 현재 상황을주고 질문에 답할 것입니다.

나는 두 가지 문제를 가지고, 그래서 나는이 게시물에 하나 이전 게시물에 다른 넣었습니다.

tbody 태그까지 하드 코딩 된 동적 테이블이 있습니다. tbody 내부의 행은 AJAX 호출에 의해 동적으로 생성됩니다.

는 I (1)의 줄무늬 (2) 테이블을 정렬 테이블 ;, 할 수 있어야한다; (3) 현재 표시된 행을 강조 표시합니다. CSS로 얼룩말 줄무늬를 만들 수 있습니다. 문제 없습니다. 그리고 CSS로 강조 행 기능 (다소)을 달성 할 수 있습니다.

그러나 테이블 정렬이 구현 될 때 (jQuery의 테이블 작성기를 사용하여) 행은 스타일을 "다시 렌더링"하지 않으므로 얼룩말 줄무늬가 아니라 연한 회색 행과 흰색 행이 덩어리로 끝납니다 . 또한 행이-강조

만 흰색 행이 방법으로 접근 (NO CSS 클래스를 적용)와 함께 작동합니다.

은 내가 지난 주에 솔루션을 제공 할 몇 가지 기사를 찾았다 고 생각했지만, 오늘을 찾을 수 없습니다. 그리고 웹상에서 발견 한 모든 것들은 구현이나 기능면에서 받아 들일 수없는 결함이있었습니다.

$("#resultsTbody").html(response); 
$("#resultsTbl").tablesorter(); 
var $rows = $(".stripeMe tbody tr"); 
$rows.hover(
    function() { $(this).addClass("currRow"); } // <--- error flagged here 
    function() { $(this).removeClass("currRow"); } 
); 

를 내가지고있어 오류 코드의 표시된 라인에 : 그것은 현재의 약자로 여기

는 코드입니다. 오류 : 난 그냥 tr:nth-child와 함께 갈 것

SyntaxError: missing) after argument list

Answer 1

가 * 내가 해결 한 믿는 나는이 모든 것을 해결 한 생각 본 * !

이 발견 내 CSS

.odd{ background: #DDDDDD; } 
.even{ background: #FFFFFF; } 

에 다음을 추가하는 위젯에 대한 문서의 모호한 비트에서 조금. 내 - 그래서 - 젊은되지 눈을 긴장 후 -

그런 다음 내 스크립트의 나머지는이 코드에 오류가있는 문제가 발견 좋아,이

$(".stripeMe").tablesorter({ widgets: ['zebra'] }); 
var $rows = $(".stripeMe tbody tr"); 
$rows.hover(function(){ 
    $(this).addClass("currRow"); 
    $(this).css("cursor","pointer"); }, 
function(){ 
    $(this).removeClass("currRow"); 
    $(this).css("cursor","auto"); } 
); 

Answer 2

:

tr:nth-child(even) {background: #CCC} 
tr:nth-child(odd) {background: #FFF}​ 

JS에 대한 필요성을. 또한 호버링 :

tr:hover{ cursor:pointer; background:#EEE}