テーブルのヘッダ操作

Question

私はtablesorterプラグインと組み合わせてこれを使用しています。私の目標は、ソートされていないカラムに空のクラス属性を持たせることです。除去される。

基本的に私ができることをしたいのは、テーブルヘッダーをクリックすると、他のすべてのテーブルでCSSクラスを削除したいのですが、クリックすると、2つのcssクラスの間で切り替える必要があります。私はXHTML Strictを使用しているため、ヘッダーの内容のアンカータグ内にrelタグを使用しています。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> 

waxwingによって推奨される変更、愚かな間違いで更新：
ここ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") 

はtrueになりますので、クラスが削除されません。一方、アンカーを2回クリックすると、最初に両方のクラスが追加され、2回目には実際にはソートダウンクラスが切り替わります（削除されます）。その後、別の列をクリックすると、期待どおりに機能します。

私はいくつかの変更を提案します。同様に他のクラスがある場合はその代わり、

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"); 
} 

を使用しています。