JavaScriptにおいて表のソートが上手くいきません

都道府県を自治体コードの通りにソートをしたいのですが、下記のコードだと上手く動いてくれません。
金額の列は思い通りにソートできているため、else if(element == 0)の条件分岐で問題が発生していると考えられるのですが、何が原因なのかわかりません。
原因と解決策を教えてください。

HTML
1<table>
2  <thead>
3    <tr>
4      <th id="0"> 都道府県 <span id="sort0" sort=""></span></th>
5      <th id="1"> 金額 <span id="sort2" sort=""></span></th>
6    </tr>
7  </thead>
8
9  <tbody>
10    <tr><td class="14">神奈川県</td> <td>20000</td>
11    <tr><td class="13">東京都</td> <td>100000</td> 
12    <tr><td class="27">大阪府</td> <td>45000</td> 
13    <tr><td class="1">北海道</td> <td>120000</td> 
14  </tbody>
15</table>

JavaScript
1$(function(){
2
3  // カラムのクリックイベント
4  $("th").click(function(){
5    // ★span要素の独自属性（sort）の値を取得
6    var sortClass = $(this).find("span").attr("sort");
7    var sortClassid = $(this).find("span").attr("id");
8    var sortFlag = "asc";
9    // 初期化
10    $("table thead tr span").text("");
11    $("table thead tr span").attr("sort", "");
12
13    if(isBlank(sortClass) || sortClass == "asc") {
14      $(this).find("span").text("▼");
15      // ★独自属性（sort）の値を変更する
16      $(this).find("span").attr("sort", "desc");
17      sortFlag = "desc";
18    } else if(sortClass == "desc") {
19      $(this).find("span").text("▲");
20      $(this).find("span").attr("sort", "asc"); 
21      sortFlag = "asc";
22    }
23
24    var element = $(this).attr("id");
25    sort(element, sortFlag, sortClassid);
26  });
27
28
29  /******** 共通関数 ********/
30  function sort(element, sortFlag, sortClassid) {
31    // ★sort()で前後の要素を比較して並び変える。※対象が文字か数値で処理を変更
32    var arr = $("table tbody tr").sort(function(a, b) {
33      if ($.isNumeric($(a).find("td").eq(element).text())) {
34        // ソート対象が数値の場合
35        var a_num = Number($(a).find("td").eq(element).text());
36        var b_num = Number($(b).find("td").eq(element).text());
37
38        if(isBlank(sortFlag) || sortFlag == "desc") {
39          // 降順
40          return b_num - a_num;
41        } else {
42          // 昇順
43          return a_num - b_num;
44        }
45      }else if(element == 0){
46        // ソート対象が都道府県の場合
47        var a_num = Number($(a).find("td").eq(element).className);
48        var b_num = Number($(b).find("td").eq(element).className);
49
50        if(isBlank(sortFlag) || sortFlag == "desc") {
51          // 降順
52          return b_num - a_num;
53        } else {
54          // 昇順
55          return a_num - b_num;
56        }
57        
58      } else {
59        // ソート対象が数値以外の場合
60        var sortNum = 1;
61        if($(a).find("td").eq(element).text() 
62             > $(b).find("td").eq(element).text()) {
63          sortNum = 1;
64        } else {
65          sortNum = -1;
66        }
67        if(isBlank(sortFlag) || sortFlag == "desc") {
68          // 降順
69          sortNum *= (-1) ;
70        }
71
72        return sortNum;
73      }
74    });
75    // ★html()要素を置き換える
76    $("table tbody").html(arr);
77  }
78
79
80  //バリデーションチェック
81  function isBlank(data){
82    if (data.length ==0 || data == ''){
83      return true;
84    } else {
85      return false;
86    }
87  }
88});

y_waiwai

2022/06/19 02:18

上手く動かないとは、なにがどういうふうになって、上手く動かないと言ってるんでしょう。そこらへん説明しよう

meg_

2022/06/19 02:55 編集

> 上手く動いてくれませんどういう状況でしょうか？ jsはどうやって呼び出しているのでしょうか？

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

回答1件

ベストアンサー

diff
1- var a_num = Number($(a).find("td").eq(element).className);
2+ var a_num = Number($(a).find("td").eq(element).attr("class"));
3- var b_num = Number($(b).find("td").eq(element).className);
4+ var b_num = Number($(b).find("td").eq(element).attr("class"));