html colspan 문제 열을 숨길 때

Question

두 개의 헤더 집합, 각 헤더에 5 개의 하위 헤더가있는 tablesorter 테이블이 있습니다. 목표는 3 개의 열만 표시하고 사용자가 주요 헤더를 기준으로 정렬 할 수있게하는 것입니다.

이 5 개의 하위 헤더 중 4 번째와 5 번째 열은 항상 표시되지만 처음 3 개 열에 대해서는 사용자가 선택한 것을 표시하고 나머지 두 개는 숨기려고합니다. Ulitmately 헤드 주요 헤더에만 3 열을 표시합니다.

표시 할 데이터를 선택할 때 열 머리글에 문제가 발생합니다.

나는 주요 헤더 3 열 병합 설정하면 때, 눈에 띄게는 완벽한 외모, 잘못된 모습

주어진 첫 번째 집합으로 다음 세트 오버 플로우 5 다음 열을 열 병합하는 주요 헤더를 설정하는 경우 주요 헤더를 기준으로 정렬을 시도합니다. 하위 헤더는 주요 헤더와 일치하지 않으며 정렬은 해제됩니다. 여기

내가 무엇을 놓치고 바이올린 http://fiddle.jshell.net/hed56hsd/1/

입니까? 유효한 해결 방법은 무엇입니까

Answer 1

각 세트의 열만 표시되므로 가장 간단한 해결책은 기본 헤더의 colspan을 3으로 설정하는 것입니다. 그게 전부 야. demo -

<th colspan='3' class="set1">Set 1</th> 
<th colspan='3' class="set2">Set 2</th> 
<th colspan='3' class="set3">Set 3</th> 

초기화에, 당신은 이벤트 리스너의 끝에서 .change()를 추가하여 데이터 선택을 적용 할 수 있습니다.

$('table').tablesorter({ 
    theme: 'blue' 
}); 

$(".selector").on("change", function() { 
    var selectedData = this.value; 
    $(".type1").addClass("hide"); 
    $('.' + selectedData).removeClass("hide"); 
}).change(); 

그것은 당신이 자동으로 어질러에서 테이블 형식을 유지하기 위해 colspan을 수정합니다 columnSelector widget을 시도 추천 것보다 더 복잡합니다.