Q&A下記のコードは点数をソートするものなのですが
「点数」をクリックするとソートはされるのですが数字がワンセット増えてしまいます。
どこを直せばいいのでしょうか？
JavaScript
1<!doctype html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>tableソート</title> 6</head> 7<body> 8 <table> 9 <thead> 10 <tr> 11 <th class="dothesort">点数</th> 12 </tr> 13 </thead> 14 <tr> 15 <td>32</td> 16 </tr> 17 <tr> 18 <td>50</td> 19 </tr> 20 <tr> 21 <td>40</td> 22 </tr> 23 <tr> 24 <td>12</td> 25 </tr> 26 <tbody> 27 </tbody> 28 </table> 29<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 30<script> 31 $(function(){ 32 //並び替えを設定 33 //1：昇順 -1：降順 34 var sortOrder = 1; 35 36 //列をクリックしたら 37 $('.dothesort').click(function(){ 38 //行を取得 39 var $rows = $('tbody>tr'); 40 //行の並び替え 41 $rows.sort(function(a, b){ 42 var _a = $(a).find('td').text() * 1; 43 var _b = $(b).find('td').text() * 1; 44 return _a - _b; 45 }); 46 //tbodyを並び替えされた行全体で入れ替え 47 $('tbody').empty().append($rows); 48 //並べ香を反転 49 sortOrder *= -1; 50 }); 51 52 }); 53</script> 54</body> 55 56</html> 57
回答2件
0
Kosuke_Shibuyaさんの修正で直りますね。
ちなみに、
JavaScript
1 //並べ香を反転 2 sortOrder *= -1;
が気になったのですが、
JavaScript
1 $rows.sort(function(a, b){ 2 var _a = $(a).find('td').text() * 1; 3 var _b = $(b).find('td').text() * 1; 4 return (_a - _b) * sortOrder; 5 });
というように、ソート条件sortOrderを掛けるの忘れてません？
投稿2015/09/04 08:02
総合スコア61
0
ベストアンサー
動作確認したわけじゃないけど、tbody がおかしいですね。
html
1 <table> 2 <thead> 3 <tr> 4 <th class="dothesort">点数</th> 5 </tr> 6 </thead> 7 <tr> 8 <td>32</td> 9 </tr> 10 <tr> 11 <td>50</td> 12 </tr> 13 <tr> 14 <td>40</td> 15 </tr> 16 <tr> 17 <td>12</td> 18 </tr> 19 <tbody> 20 </tbody> 21 </table>
↓
html
1 <table> 2 <thead> 3 <tr> 4 <th class="dothesort">点数</th> 5 </tr> 6 </thead> 7 <tbody> 8 <tr> 9 <td>32</td> 10 </tr> 11 <tr> 12 <td>50</td> 13 </tr> 14 <tr> 15 <td>40</td> 16 </tr> 17 <tr> 18 <td>12</td> 19 </tr> 20 </tbody> 21 </table>
投稿2015/09/04 07:11
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。