jQueryのテーブルは、ソート列でソートの色を変更：

Question

Iは、テーブルヘッダ列でテーブルをソートするために、次のHTMLテーブルとjQueryの機能を有する：

//sort summary table 
 
$('th').click(function() { 
 
    var table = $(this).parents('table').eq(0) 
 
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index())) 
 
    this.asc = !this.asc; 
 
    if (!this.asc) { 
 
    rows = rows.reverse(); 
 
    } 
 

 
    for (var i = 0; i < rows.length; i++) { 
 
    table.append(rows[i]); 
 
    } 
 
}); 
 
\t 
 
function comparer(index) { 
 
    return function(a, b) { 
 
\t var valA = getCellValue(a, index), 
 
     valB = getCellValue(b, index) 
 
    return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB) 
 
    } 
 
} 
 
     
 
function getCellValue(row, index) { 
 
    return $(row).children('td').eq(index).text(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
\t <tr> 
 
\t <th>S.No.</th> 
 
\t <th>School</th> 
 
\t <th>Campus City/State</th> 
 
\t <th>Campaign Name</th> 
 
\t <th>Work Order</th> 
 
\t </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>EL PASO UNIVERSITY</td> 
 
     <td> EL PASO/TX</td> 
 
     <td>Full Campaign</td> 
 
     <td>#10055</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>DALLAS UNIVERSITY</td> 
 
     <td> DALLAS/TX</td> 
 
     <td>Mini Campaign</td> 
 
     <td>#10056</td> 
 
    </tr> 
 
    <tr> 
 
    <td>3</td> 
 
    \t  <td>MINNESOTA UNIVERSITY</td> 
 
     <td> MINNEAPOLIS/MN</td> 
 
     <td>Full Campaign</td> 
 
     <td>#10059</td> \t 
 
    </tr> 
 
    </tbody> 
 
</table>

ソートするすべての機能テーブルは正常に動作しています。しかし、 テーブルの現在の順序をどの列に並べ替えるかをユーザーに知らせる方法を理解できませんでした。私はちょうど現在のクリックされた列を分けるために簡単なCSSの色を追加したい。何か案が？

Answer 1

クリックしたもの以外のすべてのヘッダーにCSSの色を追加すると、このトリックが実行されます。ちょうどあなたの関数に上記のコードを追加し

$('th').css({'background-color' : '#808080'}); 
$('th').css({'color' : '#FFFFFF'}); 
$(this).css('background-color', '#6f3d3d'); //change the background color 
$(this).css({'color' : '#0000FF'}); //change the font color 

：

//sort summary table 
 
$('th').click(function(){ 
 
    //add your css trick 
 
    $('th').css({'background-color' : '#808080'}); 
 
    $('th').css({'color' : '#FFFFFF'}); 
 
    $(this).css('background-color', '#6f3d3d'); 
 
    $(this).css({'color' : '#0000FF'}); 
 

 
    var table = $(this).parents('table').eq(0) 
 
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index())) 
 
    this.asc = !this.asc 
 
    if (!this.asc) { 
 
    rows = rows.reverse(); 
 
    } 
 
    for (var i = 0; i < rows.length; i++) { 
 
    table.append(rows[i]); 
 
    } 
 
}); 
 
\t 
 
function comparer(index) { 
 
    return function(a, b) { 
 
    var valA = getCellValue(a, index), 
 
     valB = getCellValue(b, index) 
 
     return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB) 
 
    } 
 
} 
 
     
 
function getCellValue(row, index) { 
 
    return $(row).children('td').eq(index).text(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>S.No.</th> 
 
     <th>School</th> 
 
     <th>Campus City/State</th> 
 
     <th>Campaign Name</th> 
 
     <th>Work Order</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> \t \t 
 
    <tr> 
 
     <td>1</td> 
 
     <td>EL PASO UNIVERSITY</td> 
 
     <td> EL PASO/TX</td> 
 
     <td>Full Campaign</td> 
 
     <td>#10055</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>DALLAS UNIVERSITY</td> 
 
     <td> DALLAS/TX</td> 
 
     <td>Mini Campaign</td> 
 
     <td>#10056</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>MINNESOTA UNIVERSITY</td> 
 
     <td> MINNEAPOLIS/MN</td> 
 
     <td>Full Campaign</td> 
 
     <td>#10059</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

あなただけチェックするあなたのJSに条件を追加する必要があります。このような何かによって達成することができますこの列が現在ソートされた列である場合、

$('th').click(function() { 
    if (!$(this).hasClass('sort-by')) { 
    $('th').removeClass('sort-by'); 
    $(this).addClass('sort-by'); 
    // logic for sorting by this column 
    } 
}); 

と簡単なルールをCSSに追加する

.sort-by { 
    background-color: blue; // or whatever 
}