jQuery Tablesorter 플러그인 - 대체 행 색상을 유지합니다

StackOverflow https://stackoverflow.com/questions/1442026

문제

대체 행 색상을 적용하는 HTML 테이블을 가져 와서 jQuery 테이블 분류기를 추가하여 사용자가 테이블을 정렬 할 수 있습니다.

문제는 대체 행 색상이 (정렬에 따라) 동일한 배경색의 여러 행이 있기 때문에 이제 모두 엉망이된다는 것입니다.

jQuery 테이블 분류기로 대체 행 색상을 재설정하는 방법이 있습니까?

도움이 되었습니까?

해결책

이미 기본 위젯이 있습니다 zebra, 클래스를 적용하는 코어에 내장 odd 그리고 even 줄을 대체합니다. 추가했는지 여부는 작동합니다 class=even/odd HTML 파일에.

설정하기가 정말 쉽습니다. 나는 단순히 지시를 따랐다 테이블 분류기 웹 사이트, 그런 다음 문서 준비 기능을 다음과 같이 수정했습니다.

<script type="text/javascript">
$(document).ready(function() 
    { 
        $("#myTable").tablesorter({ 
    widgets: ['zebra'] 
    }); 
    } 
); 
</script>

질문에 대답하면서 모범을 보였습니다. 당신은 할 수 있습니다 결과를 실제로보십시오, 또는 예제 코드를 참조하십시오.

다른 팁

Anthony의 답변을 기반으로하지만 1 라이너 (대부분)로 다시 게시했습니다.

function fixStripes() {
    $('table tr').removeClass('odd even')
        .filter(':even').addClass('even').end()
        .filter(':odd').addClass('odd');
}

$("table").bind("sort", fixStripes);

jQuery 호출은 위와 같이 "체인"될 수 있으며 다음과 같은 작업을 사용합니다. filter() 선택한 요소를 제한합니다 .end() 마지막 선택에 "재설정"합니다. 다른 방법으로, 각각 .end() 이전의 "취소" .filter(). 마지막 .end() 그 후에 할 일이 없기 때문에 중단되었습니다.

정렬이 발생한 후 얼룩말 줄무늬를 유지하려면 얼룩말 위젯을 다시 트리거해야합니다.

$('#myTable')
.tablesorter({ widgets: ['zebra'] })
.bind('sortEnd', function(){
    $("#myTable").trigger("applyWidgets"); 
});

Zebra 위젯의 논리를 재현하지 않고 재사용 할 것이기 때문에 이것은 해킹이 적습니다.

메모: 이러한 종류의 작업 어라운드는 기본 Zebra 위젯이 실패한 경우에만 필요합니다. 위젯이 정렬을 올바르게 작동하기 때문에 대부분의 상황 에서이 해킹이 필요하지 않다는 것을 알았습니다.

어때요 :

function fixStripes() {
     var i = 0;
     var rowclass;
     $("table tr").each(function() {
          $(this).removeClass("odd even");
          rowclass = (i%2 == 1) ? "odd" : "even";
          $(this).addClass(rowClass);
      });
}

$("table").bind("sort", fixStripes);

아, 그리고 당신이 정말로 간단한 수정을 원한다면, 당신은이 CSS 의사 클래스에 대한 숨을 참아 모든 주요 브라우저에서 픽업 할 수 있습니다.

table tr:nth-child(n+1) {
    color: #ccc;
}

그러나 내 추측은 FF와 회사가 Dynamic HTML의 CSS를 어떻게 처리하는지에 근거하고 있습니다. 스트라이프 onload를 설정하지만 정렬 한 후 CSS를 적용하지는 않습니다. 하지만 확실히 알고 싶습니다.

개정 및 최신 작업 솔루션 - 내장 *이것은 또한 클릭으로 색상 변경을 가능하게합니다.*

 <script type="text/javascript">
   $(document).ready(function () {

    $('#tblLookupResult').tablesorter({ widthFixed: true, sortList: [[0, 0], [0, 1], [0, 2]], theme: 'blue', widgets: ['zebra'] })
                          .tablesorterPager({ container: $("#pager"), size: $(".pagesize option:selected").val() });

    $('#tbltable1 tbody tr').live('click', function () {               
                    if ($(this).hasClass('even')) {
                        $(this).removeClass('even');
                        $(this).addClass('ui-selected');
                    }

                    else if ($(this).hasClass('odd')) {
                        $(this).removeClass('odd');
                        $(this).addClass('ui-selected');
                    }
                    else {
                        $(this).removeClass('ui-selected');
                        $(".tablesorter").trigger("update");
                        $(".tablesorter").trigger("applyWidgets");                         
                    }

        });

    });
</script>

이제 모든 것이 스스로를 쫓아 내야합니다!

CSS를 통해 :

  table.tablesorter tr:nth-child(even) {
        background-color: #ECFAFF;
    }
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top