jQuery の tablesorter において並べ変えた列の見出し背景色を変更

jQuery の tablesorter プラグインを使った、列の値を基準に、項目を並べ替えられる表(テーブル)において、並べ変え基準にした列の見出しの背景色を変更する方法。昇順、降順、別々に異なる色を指定する。

実装例(サンプル)

商品名 id 値段 評価 デザイン
A商品 2256 8800 54 73
B商品 2011 5900 71 52
C商品 7025 15000 97 100
D商品 1023 8800 62 63
E商品 5123 8800 62 73

実装例(サンプル)の動作について

  • 表の列の見出し(「商品名「ID」「値段」「評価」「デザイン」)をクリックすると、その列の値を基準に、商品が並べ変わる。
  • 1度目のクリックは、昇順に並べ変わる。2度目のクリックは、降順に並べ変わる。
  • 昇順で並べ変えた列の見出しの背景色は、 ラベンダー色 に変わる。降順で並べ変えた列の見出しの背景色は、 ピンク色 に変わる。
  • 「値段」で並べ替えた後、キーボードの「Shift」キーを押したまま、「評価」をクリックすると、「値段」が同じ商品だけ、さらに「評価」を基準に並べ替える。この例の場合、8800円の商品3つを、さらに「評価」に基づいて並べ替える。

実装例(サンプル)のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-tablesorter-table' ) . tablesorter();
} );
// -->
</script>

CSS

<style>
<!--
#jquery-tablesorter-table th {
    font-size: 15px !important;
    color: gray !important;
    background: #f0e68c;
    cursor: n-resize;
}
#jquery-tablesorter-table th span {
    border: 1px solid gray;
    border-radius: 5px;
    color: gray;
    background: #d1d1d1;
    font-size: 15px !important;
    padding: 0 2px;
}
#jquery-tablesorter-table th, #jquery-tablesorter-table td {
    border: 1px solid gray;
}
#jquery-tablesorter-table th.headerSortUp {
    background: pink;
}
#jquery-tablesorter-table th.headerSortDown {
    background: lavender;
}
-->
</style>

HTML

<table id="jquery-tablesorter-table">
<thead>
<tr>
    <th><span>&#10606;</span> 商品名</th>
    <th><span>&#10606;</span> id</th>
    <th><span>&#10606;</span> 値段</th>
    <th><span>&#10606;</span> 評価</th>
    <th><span>&#10606;</span> デザイン</th>
</tr>
</thead>
<tbody>
<tr>
    <td>A商品</td>
    <td>2256</td>
    <td>8800</td>
    <td>54</td>
    <td>73</td>
</tr>
<tr>
    <td>B商品</td>
    <td>2011</td>
    <td>5900</td>
    <td>71</td>
    <td>52</td>
</tr>
<tr>
    <td>C商品</td>
    <td>7025</td>
    <td>15000</td>
    <td>97</td>
    <td>100</td>
</tr>
<tr>
    <td>D商品</td>
    <td>1023</td>
    <td>8800</td>
    <td>62</td>
    <td>63</td>
</tr>
<tr>
    <td>E商品</td>
    <td>5123</td>
    <td>8800</td>
    <td>62</td>
    <td>73</td>
</tr>
</tbody>
</table>

スポンサード リンク

カテゴリー: JavaScript, jQuery, tablesorter, プラグイン, パーマリンク