都道府県を自治体コードの通りにソートをしたいのですが、下記のコードだと上手く動いてくれません。
金額の列は思い通りにソートできているため、else if(element == 0)の条件分岐で問題が発生していると考えられるのですが、何が原因なのかわかりません。
原因と解決策を教えてください。
HTML
<table> <thead> <tr> <th id="0"> 都道府県 <span id="sort0" sort=""></span></th> <th id="1"> 金額 <span id="sort2" sort=""></span></th> </tr> </thead> <tbody> <tr><td class="14">神奈川県</td> <td>20000</td> <tr><td class="13">東京都</td> <td>100000</td> <tr><td class="27">大阪府</td> <td>45000</td> <tr><td class="1">北海道</td> <td>120000</td> </tbody> </table>
JavaScript
$(function(){ // カラムのクリックイベント $("th").click(function(){ // ★span要素の独自属性(sort)の値を取得 var sortClass = $(this).find("span").attr("sort"); var sortClassid = $(this).find("span").attr("id"); var sortFlag = "asc"; // 初期化 $("table thead tr span").text(""); $("table thead tr span").attr("sort", ""); if(isBlank(sortClass) || sortClass == "asc") { $(this).find("span").text("▼"); // ★独自属性(sort)の値を変更する $(this).find("span").attr("sort", "desc"); sortFlag = "desc"; } else if(sortClass == "desc") { $(this).find("span").text("▲"); $(this).find("span").attr("sort", "asc"); sortFlag = "asc"; } var element = $(this).attr("id"); sort(element, sortFlag, sortClassid); }); /******** 共通関数 ********/ function sort(element, sortFlag, sortClassid) { // ★sort()で前後の要素を比較して並び変える。※対象が文字か数値で処理を変更 var arr = $("table tbody tr").sort(function(a, b) { if ($.isNumeric($(a).find("td").eq(element).text())) { // ソート対象が数値の場合 var a_num = Number($(a).find("td").eq(element).text()); var b_num = Number($(b).find("td").eq(element).text()); if(isBlank(sortFlag) || sortFlag == "desc") { // 降順 return b_num - a_num; } else { // 昇順 return a_num - b_num; } }else if(element == 0){ // ソート対象が都道府県の場合 var a_num = Number($(a).find("td").eq(element).className); var b_num = Number($(b).find("td").eq(element).className); if(isBlank(sortFlag) || sortFlag == "desc") { // 降順 return b_num - a_num; } else { // 昇順 return a_num - b_num; } } else { // ソート対象が数値以外の場合 var sortNum = 1; if($(a).find("td").eq(element).text() > $(b).find("td").eq(element).text()) { sortNum = 1; } else { sortNum = -1; } if(isBlank(sortFlag) || sortFlag == "desc") { // 降順 sortNum *= (-1) ; } return sortNum; } }); // ★html()要素を置き換える $("table tbody").html(arr); } //バリデーションチェック function isBlank(data){ if (data.length ==0 || data == ''){ return true; } else { return false; } } });
まだ回答がついていません
会員登録して回答してみよう