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

投稿日: 2011年7月27日作成者: alphasis

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

実装例（サンプル）

⥮ 商品名	⥮ id	⥮ 値段	⥮ 評価	⥮ デザイン
Ａ商品	2256	8800	54	73
Ｂ商品	2011	5900	71	52
Ｃ商品	7025	15000	97	100
Ｄ商品	1023	8800	62	63
Ｅ商品	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>

</script>

CSS

<style>

</style>

HTML

<table id="jquery-tablesorter-table">
<thead>
<tr>
<th><span>⥮</span> 商品名</th>
<th><span>⥮</span> id</th>
<th><span>⥮</span> 値段</th>
<th><span>⥮</span> 評価</th>
<th><span>⥮</span> デザイン</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ａ商品</td>
<td>2256</td>
<td>8800</td>
<td>54</td>
<td>73</td>
</tr>
<tr>
<td>Ｂ商品</td>
<td>2011</td>
<td>5900</td>
<td>71</td>
<td>52</td>
</tr>
<tr>
<td>Ｃ商品</td>
<td>7025</td>
<td>15000</td>
<td>97</td>
<td>100</td>
</tr>
<tr>
<td>Ｄ商品</td>
<td>1023</td>
<td>8800</td>
<td>62</td>
<td>63</td>
</tr>
<tr>
<td>Ｅ商品</td>
<td>5123</td>
<td>8800</td>
<td>62</td>
<td>73</td>
</tr>
</tbody>
</table>

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