javascriptでテーブルソート

javascriptでテーブルソートについて質問です。
こちらは動きだけで構いませんのでどなたかご教授お願いします。

1.<th class="***">を1回目タップすると、昇順へ（上向きの▲アイコンの色が変化）
2.もう一度タップすると、降順へ（下向きの▼アイコンの色が変化）
3.それ以降は昇降交互に入れ替わる。
と言う動きをしたいと思っています。
ちなみに画像は3枚ありまして、タップする前は上下色なしの▲▼画像があり、2枚目は上▲が色あり、3枚目は下▼が色あります。

どなたか分かる方、宜しくお願いいたします。

行動規範の内容に同意します

回答3件

ベストアンサー

jQueryを使うことを許していただけるなら、

lang
1$('th').on('click',function(){
2  var target = $(this);
3  var q = 'td:eq(' + target.index() + ')';
4  
5  if ( target.hasClass('desc') ){
6    var compare = function(a,b){return $(q, a).text() < $(q, b).text()}
7  } else {
8    var compare = function(a,b){return $(q, a).text() > $(q, b).text()}
9  }
10  
11  $('table').append( Array.prototype.sort.call($('tr').not(':first-child'), compare) );
12  
13  target.toggleClass('desc');
14});

細かいことを抜きで書くとこんな感じです。

サンプル
http://jsfiddle.net/vnxvcogx/

投稿2014/12/04 07:33

Lhankor_Mhy

総合スコア36140

Lhankor_Mhy

2014/12/04 07:52

不等号が逆だった

行動規範の内容に同意します

listjs という javascript のコンポーネントがあります。
テーブルのソート例が http://www.listjs.com/examples/table にあります。
"sort by name" のボタンをクリックするとソートの昇順・降順が切り替わります。

web 画面上でテーブルを表示し、ソートを含む各種操作を行うという需要は多いので、たくさんのツールが開発されています。
"jquery table sort" などで検索するだけでも、たくさんの情報が見つかります。

投稿2014/12/03 14:57

katoy

総合スコア22324

morinokuma

2014/12/04 03:37

返信ありがとうございます。こう言ったプラグイン等使わずに実装したいと思っていて http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_tablesort/tablesorter.inc&ttl=tablesorter このページにある様に本当にそのまま、ただ<th>をクリックしたら上▲、下▼に変わる様矢印アイコンの動きだけを実装したいと思っています。 ※動きだけでソートはしなくて構いません。

行動規範の内容に同意します

Javascriptでテーブルを作る場合、テーブル自体もJavascriptで作った方が制御が楽です。
テーブル部分はdivで作っていますが、サンプルとして以下を作ってみました。

動作サンプル：
http://embed.plnkr.co/8adH9uQPo74ayJUAAOWT/preview

ソース：

lang
1<!DOCTYPE html>
2<html>
3  <head>
4    <link data-require="fontawesome@4.1.0" data-semver="4.1.0" rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" />
5    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
6    <link rel="stylesheet" href="style.css" />
7    <script src="script.js"></script>
8  </head>
9
10  <body>
11    <div id="sortBtn"><i class="fa fa-sort-desc"></i></div>
12    <div id="table1"></div>
13  </body>
14</html>

lang
1function getDescTable(dataArray){
2  var result = '';
3  dataArray.forEach(function(data){
4    result += '<div>'+data+'</div>';
5  });
6  return result;
7}
8function getAscTable(dataArray){
9  var result = '';
10  dataArray.forEach(function(data){
11    result = '<div>'+data+'</div>' + result;
12  });
13  return result;
14}
15
16var dataArray = ['aaaa','bbbb','cccc'];
17var sortType = 0;
18$(document).ready(function(){
19  $('#table1').html(getDescTable(dataArray));
20  $('#sortBtn').click(function(){
21    var icon = $(this).find('i');
22    if(icon.hasClass('fa-sort-desc')){
23      icon.removeClass('fa-sort-desc');
24      icon.addClass('fa-sort-asc');
25      $('#table1').html(getAscTable(dataArray));
26    } else {
27      icon.removeClass('fa-sort-asc');
28      icon.addClass('fa-sort-desc');
29      $('#table1').html(getDescTable(dataArray));
30    }
31  });
32});