[jQuery] プラグインを使わずにテーブルをソートするサンプル（降順、昇順）
-
カテゴリ：
- JavaScript
-
タグ：
- #jQuery
jQueryでテーブルの並び順を変更するサンプルを作成しましたのでご紹介╰(*´︶`*)╯。
テーブルのヘッタを一度クリックすると表が降順にソートし、もう一度クリックすると昇順にソートする仕様です。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>sum price</title>
</head>
<body>
<table>
<thead>
<tr>
<th id="0">商品<span id="sort0" sort=""></span></th>
<th id="1">価格<span id="sort1" sort=""></span></th>
</tr>
</thead>
<tbody>
<tr>
<td>キーボード</td>
<td class="price">15000</td>
</tr>
<tr>
<td>マウス</td>
<td class="price">6000</td>
</tr>
<tr>
<td>モニター</td>
<td class="price">50000</td>
</tr>
<tr>
<td>デスクトップPC</td>
<td class="price">200000</td>
</tr>
<tr>
<td>プリンター</td>
<td class="price">40000</td>
</tr>
</tbody>
</table>
</body>
<div>
<p class="sum_price">合計：0円</p>
</div>
</html>CSS
body {
background-color: #a3d5d3;
font-family: 'Helvetica', 'Arial', sans-serif;
width: 450px;
margin: 0 auto;
padding: 20px;
}
table, input {
margin: 5px;
}
input[type=text] {
width: 120px;
}
table,tr,th,td {
font-size: 20px;
width: 70%;
list-style-type: none;
border-radius: 3px;
border: 1px solid #000;
padding: 5px;
}
td {
background: #eeeff0;
padding-left: 15px;
}
.display-none{
display:none;
}Javascript
$(function(){
// 画面表示時に価格の合計値を計算
var sum_price = sum();
// カラムのクリックイベント
$("th").click(function(){
// ★span要素の独自属性（sort）の値を取得
var sortClass = $(this).find("span").attr("sort");
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);
});
/******** 共通関数 ********/
function sort(element, sortFlag) {
// ★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 {
// ソート対象が数値以外の場合
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 sum(){
// 表の金額を取得する(tdの奇数列を取得)
var pricelist = $("table td[class=price]").map(function(index, val){
var price = parseInt($(val).text());
if(price >= 0) {
return price;
} else {
return null;
}
});
// 価格の合計を求める
var total = 0;
pricelist.each(function(index, val){
total = total + val;
});
$(".sum_price").text("合計："+total+"円");
}
//バリデーションチェック
function isBlank(data){
if (data.length ==0 || data == ''){
return true;
} else {
return false;
}
}
});サンプル
【point！！】
$(this).find("span")：
すべての要素からspan要素を探して取得する
$(this).find("span").attr("sort");：
span要素の独自属性（sort）の値を取得する
$(this).find("span").attr("sort", "asc"); ：
span要素の独自属性（sort）の値を変更する
$("××").sort(function(a, b) {…｝：
sort()で前後の要素を比較して並び変える。※対象が文字か数値で処理を変更
$("××").html(arr);：
要素を置き換える
投稿日：2019-11-22
更新日：2019-12-05
