別の列がクリックされたときにタイトルを変更するJavascript

-1

私はテーブルを持っていて、別の列の見出しをクリックした後、並べ替えを行う他の列をリセットしたいと思います。現在、私は持っている：私は最初の列の並べ替えを実行すると別の列がクリックされたときにタイトルを変更するJavascript

<html> 
<head> 
<script> 
function changeSort(obj) 
{ 

    var firstName = document.getElementById('fName'); 
var lastName = document.getElementById('lName'); 
var phoneNumber = document.getElementById('phone'); 
var birthDate = document.getElementById('birth'); 


if(obj.id == 'fName') 
{ 
//alert("fName"); 
obj.title = (obj.title== 'sort ascending first name') ? 'sort descending first 
name' : 'sort   ascending first name'; 
} 

if(obj.id == 'lName') 
{ 
//alert("lName"); 
obj.title = (obj.title== 'sort ascending last name') ? 'sort descending first name' : 'sort 
ascending last name'; 
} 

if(obj.id == 'phone') 
    { 
    //alert("phone"); 
    obj.title = (obj.title== 'sort ascending phone number') ? 'sort descending phone 
    number' : 'sort ascending phone number'; 
    } 

if(obj.id == 'birth') 
{ 
    //alert("birth"); 
    obj.title = (obj.title== 'sort ascending birth date') ? 'sort descending birth  
    date' : 'sort 
    ascending birth date'; 
    } 

    } 

    </script> 
</head> 
<body 

    <table> 

    <tr> 
      <th id="fName" onclick='changeSort(this)' title="sort by First Name" >First Name</th> 
    <th id="lName" onclick='changeSort(this)' title="sort by Last Name" >Last 
    Name</th> 
    <th id="phone" onclick='changeSort(this)' title="sort by Phone Number" >Phone 
    Number</th> 
    <th id="birth" onclick='changeSort(this)'title="sort by Birth Date" >Birth 
    Date</th> 
    </tr> 

    </table> 

    </body> 
    </html>

が、私はそれが現在私が決定した場合、私は私が望む最後の名前でソートしたいん昇順または降順にタイトルを変更したいです最初の名前は、名前をソートして昇順または降順に戻すように変更するタイトルです。別のテーブルの頭がclcikedされているときに、変更されたテーブルの頭をデフォルトに戻すにはどうしたらいいですか？あなたが追加する必要があり、関数の最後で

出典

2012-01-28 Juan Almonte

[jquery tablesorterの変更のヘッダータイトルの並べ替えの並べ替え]（http://stackoverflow.com/questions/9046715/jquery-tablesorter-change-header-title-ttributes-on-sort） – Mottie

可能な複製httpの：//stackoverflow.com/questions/9027508/jquery-tablesorter-add-title-tooltip-to-show-ascending-descending – Mottie

はアンドレのポイントで拾い...そこにこれを行うにはクリーンな方法でもよいが、我々は全体のコードをリファクタリングしなければならなかったでしょうより洗練された方法があることを覚えておいてください。ここでは、列の数に依存しないようにコードをリファクタリングしています。

function changeSort(th){ 
    var titleTemplates = { 
     asc: 'sort ascending %s', 
     desc: 'sort decending %s', 
     dflt: 'sort by %s' 
    }; 
    titleTemplates.get = function(key, txt){ 
     var t = this[key] || this.dflt; 
     return t.replace('%s', txt); 
    }; 
    var headerRow = th.parentNode; 
    var cells = headerRow.getElementsByTagName('th'); 
    for(var i=0; i<cells.length; i++){ 
     var c = cells[i]; 
     var s = c.getAttribute('sortCode'); 
     var s_ = (c !== th) ? '' : (!s || s == 'desc') ? 'asc' : 'desc'; 
     c.setAttribute('sortCode', s_); 
     c.title = titleTemplates.get(s_, c.innerHTML); 
    } 
}

オペラ11.61でテスト

あなたは（そして実際にすべきである）JavaScriptではなく、HTMLでTH要素にクリックハンドラを取り付けることで、さらに行くことができます。

出典

2012-01-28 04:45:15

マイクロ最適化では、 'for（var i = 0、len = cells.length; i ajax333221

タイトルはすべて並べ替えられ、昇順または降順では決して動作しませんでした。 –

OK私は軽い編集を行いました。 'th.parentNode（）'を 'th.parentNode'に変更しました（jQueryにも慣れてきました。これはnative jのメソッドではないプロパティです）。 –

：

firstName.title = obj.id == 'fName'? firstName.title : 'sort by first name'; 
lastName.title = obj.id == 'lName'? lastName.title : 'sort by last name'; 
phoneNumber.title = obj.id == 'phone'? phoneNumber.title : 'sort by phone number'; 
birthDate.title = obj.id == 'birth'? birthDate.title : 'sort by birth date';

出典

2012-01-28 02:12:40

私は三項条件に '&&'を追加します： 'obj.id == 'fName' && firstName .title！= 'sort by first name''なので、必要なときにのみ更新されます（DOMを使いこなすのは賢明ではありません）。 – ajax333221

他の列がクリックされたときにどちらもタイトルを更新しません。もう1つは昇順または降順で –

あなたはそれを正しくやっていると確信していますか？これはthr changeSort関数の内側にある必要があります。最後に –

別の列がクリックされたときにタイトルを変更するJavascript

答えて

関連する問題