jQuery Tablesorter 플러그인 - 대체 행 색상을 유지합니다
-
10-07-2019 - |
문제
대체 행 색상을 적용하는 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;
}