표 머리글 조작

Question

tablesorter 플러그인과 함께 사용하고 있습니다. 목표가 정렬되지 않은 모든 열에 빈 클래스 속성을 갖는 것입니다. 즉 한 열을 클릭하면 다른 클래스의 클래스 속성 제거됩니다.

기본적으로 내가 할 수 있기를 원하는 것은 테이블 헤더를 클릭하면 다른 모든 테이블에서 CSS 클래스를 제거하고 싶습니다. 클릭하면 두 개의 CSS 클래스 사이를 전환해야합니다. 헤더의 내용에서 앵커 태그 내에서 rel 태그를 사용하고 있습니다. XHTML Strict를 사용하고 rel을 테이블 헤더 태그 자체에서 정의 할 수 없기 때문에이 작업을 수행합니다. 내가 그 일을해야 겠지하는 즉시 헤더를 클릭 같다

$(function() { 
    $("a[rel='Header']").click(function() { 

     $("a[rel='Header']").each(function() { 
      if($(this).attr("class")=="sort-up"){$(this).removeClass("sort-up");} 
      if($(this).attr("class")=="sort-down"){$(this).removeClass("sort-down");} 
     }) 

     if($(this).attr("class")==""){$(this).addClass("sort-up");} 
      $(this).toggleClass("sort-down") 
      });  
}); 

는 클래스 속성 "일종의 업"을 포함하는 경우, 각 헤더를 통해주기, 제거 다음과 같이 내 코드는 ; 클래스 속성 "sort-down"이 있으면 제거하십시오. 그런 다음 현재 클릭 된 헤더의 경우 클래스 속성 "sort-up"을 추가하고 "sort-down"속성 사이를 전환하십시오. 내 문제는 하나의 헤더를 클릭 할 때 헤더에서 아래쪽 화살표 (/)로 표시된 "정렬 - 다운"클래스를 사용하는 경우 다른 컬럼의 다른 헤더를 클릭하면 해당 속성이 표시되지 않습니다. 제거되지 않습니다. 그러나 "정렬"클래스 (^)는 제거됩니다. 나는 hasClass의 구문에주의를 지불하지 않은, 작동,

<thead> 
      <tr> 
       <th><a rel = "Header" href="#" class="">Title</a></th> 
       <th><a rel = "Header" href="#" class="">Instructor</a></th> 
       <th class="{sorter: 'usLongDate'}"><a rel = "Header" href="#" class="">Date</a></th> 
       <th class="{sorter: false}">Start/End</th> 
       <th><a rel = "Header" href="#" class="">Seats Available</a></th> 
       <th><a rel = "Header" href="#" class="">Enrolled</a></th> 
       <th><a rel = "Header" href="#" class="">Pre-Requisites</a></th> 
       <th class="{sorter: false}">Workshop Actions</th> 
      </tr> 
     </thead> 

여새 류 추천 변경, 바보 같은 실수로 업데이트 :
다음은 XHTML 내 헤더의 목록입니다. 감사.

$(function() { 
    $("a[rel='Header']").click(function() { 

     $("a[rel='Header']").each(function() { 
      if($(this).hasClass("sort-up")){$(this).removeClass("sort-up");} 
      if($(this).hasClass("sort-down")){$(this).removeClass("sort-down");} 
     }) 

     if($(this).hasClass("")){$(this).addClass("sort-up");} 
      if ($(this).hasClass("sort-up")) { 
        $(this).removeClass("sort-up").addClass("sort-down"); 
       } else { 
        $(this).removeClass("sort-down").addClass("sort-up"); 
       } 
      if($(this).attr("title") == "Sort column in ascending order"){ 
       $(this).attr({title : "Sort column in descending order"});} 
      else {$(this).attr({title : "Sort column in ascending order"});} 
      });  
}); 

Answer 1

시도 :

$(function() { 
    $("a[rel='Header']").click(function() { 
    // store the header and this for later use 
    var $thead = $(this).parents().filter("thead").slice(0,1); 
    var $this = $(this); 

    // if we were sort-up - we become sort-down - otherwise we become sort-up 
    if ($this.hasClass('sort-up')) { 
     $this.removeClass('sort-up').addClass('sort-down'); 
    } else { 
     $this.removeClass('sort-down').addClass('sort-up'); 
    } 

    // all headers except the one we clicked on - remove sort classes 
    $("a[rel='Header']",$thead).not($this[0]).each(function() { 
     $(this).removeClass('sort-up').removeClass('sort-down'); 
    }); 

    // set link titles based on current class 
    $("a[rel='Header']", $thead).each(function() { 
     if ($(this).hasClass('sort-up')) 
     { 
     $(this).attr('title', 'Sort column in descending order'); 
     } else { 
     $(this).attr('title', 'Sort column in ascending order'); 
     } 
    }); 
    // end click function 
    }); 
}); 

Answer 2

내게는 이렇게 보입니다. 한 번 클릭하면 클래스가 비어 있기 때문에 정렬 클래스가 추가됩니다. 다음 줄로 인해 정렬 클래스도 추가됩니다. 이제 정렬과 정렬을 모두 갖춘 셀이 생겼습니다. 클래스가 제거되지 않도록, 또 다른 헤더를 클릭하면 둘

if($(this).attr("class")=="sort-up") 

도

if($(this).attr("class")=="sort-down") 

은 사실 없습니다. 반면에 앵커를 두 번 클릭하면 두 클래스를 처음 추가 할 것이고 두 번째로 정렬 - 클래스를 실제로 토글 (제거)합니다. 그런 다음 다른 열을 클릭하면 예상대로 작동합니다.

몇 가지 변경 사항을 제안합니다. 뿐만 아니라 다른 클래스가있는 경우 대신

if($(this).attr("class")=="sort-up") 

사용할 수있는,

if ($(this).hasClass("sort-up")) 

를 사용하는 여전히 사실 일 것이다. 또한이 경우 toggleClass를 사용할 수 없습니다. 대신, 같은 그들 사이에 후속 클릭에 정렬 위로 정렬 아래로 전환 한 후 앵커에게 첫 번째 클릭에 정렬 다운 클래스를 제공하고,해야

if ($(this).hasClass("sort-up")) { 
    $(this).removeClass("sort-up").addClass("sort-down"); 
} else { 
    $(this).removeClass("sort-down").addClass("sort-up"); 
} 

뭔가를 사용합니다.