表の中に入力した数値でソートをするにはどうすればいいでしょうか？

前提・実現したいこと

初めて質問します。初学者です。
HTMLとJavaScriptで表を作っています。
表の中にランジタイプのフォームを入れて、ランジを動かした後の数値で、列にソートをかけたいです。
最終的にはFC2ブログの記事の中で動かしますが、そのまえにただブラウザで表示して動かしたいです。
どうすれば動かした後のランジの数値でソートできるのか知りたいです。

発生している問題・エラーメッセージ

ランジで数値を入力、動かした後、数値は表の中に出せるのですが、数値の順番通りにソートができません。

該当のソースコード

HTML
1<html>
2<head>
3  <meta charset="utf-8">
4  <!-- jQuery -->
5  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
6  <!-- jQuery UI -->
7  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
8  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
9
10<!-- ソートできるようにするために読み込む  -->
11<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.min.js"></script>
12
13<!-- フォルダ内のCSS -->
14  <!-- <link rel="stylesheet" href="css/Test.css"> -->
15
16<!-- CSS blackice -->
17<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/css/theme.blackice.min.css">
18
19  </head>
20<body>
21<table class="tablesorter-blackice" id="myTable" border="1">
22
23<!-- theadが一行目になる 列の名前を書いてく -->
24<thead>
25  <tr>
26    <th class="sort" data-sort="ranking" >順位</th>
27    <th class="sort" data-sort="values" >価値観</th>
28    <th class="sort" data-sort="explanation" >説明</th>
29    <th class="sort" data-sort="importance" id="importance">重要度</th>
30  </tr>
31</thead>
32
33<!--tbody ここから２行目-->
34<tbody class="list" id="sortdata">
35  <tr>
36    <td class="ranking"  name="num_data">1</td>
37    <td class="values">余暇</td>
38    <td>自分の時間をリラックスして楽しむ</td>
39    <td class="importance">
40      <form oninput="result.value=formImportance0.value">
41        <output name="result"  for="formImportance0">0</output>
42        <input  type=range name="formImportance" id="formImportance0" value="0" min="0" max="5" >
43      </form>
44      </td>
45    </tr>
46
47
48  <tr>
49    <td class="ranking" name="num_data">2</td>
50    <td class="values">寵愛</td>
51    <td>親しい人から愛される</td>
52    <td class="importance" >
53      <form oninput="result.value=formImportance1.value">
54        <output name="result" for="formImportance1">0</output>
55        <input  type="range" name="formImportance" id="formImportance1" value="0" min="0" max="5" >
56      </form>
57    </td>
58  </tr>
59
60  <tr>
61    <td class="ranking" name="num_data">3</td>
62    <td class="values">愛慕</td>
63    <td>誰かに愛を与える</td>
64    <td class="importance">
65      <form oninput="result.value=formImportance2.value">
66        <output name="result" for="formImportance2">0</output>
67        <input  type="range" name="formImportance" id="formImportance2" value="0" min="0" max="5" >
68      </form>
69    </td>
70  </tr>
71
72  <tr>
73    <td class="ranking" name="num_data">4</td>
74    <td class="values">熟達</td>
75    <td>いつもの仕事／作業に習熟する</td>
76    <td class="importance">
77      <form  oninput="result.value=formImportance3.value">
78        <output  name="result" for="formImportance3">0</output>
79        <input  type="range" name="formImportance" id="formImportance3" value ="0" min="0" max="5" >
80      </form >
81    </td >
82  </tr >
83
84  <tr >
85    <td class="ranking" name="num_data">5</td>
86    <td class="values">現在</td>
87    <td>今の瞬間に集中して生きる</td>
88    <td class="importance">
89      <form oninput="result.value=formImportance4.value">
90        <output name="result" for="formImportance4">0</output>
91        <input  type="range" name="formImportance" id="formImportance4" value="0" min="0" max="5" >
92      </form>
93    </td>
94
95  </tr>
96</tbody>
97</table>
98
99
100<!-- 行列をドラッグで並び替えできるようにするコード -->
101<script type="text/javascript">
102$('#sortdata').sortable();
103// sortstopイベントをバインド
104$('#sortdata').bind('sortstop',function(){
105  // 番号を設定している要素に対しループ処理
106  $(this).find('[name="num_data"]').each(function(idx){
107    // タグ内に通し番号を設定（idxは0始まりなので+1する）
108    $(this).html(idx+1);
109  });
110});
111
112// ソートできるようにする
113$(function(){
114  $("#myTable").tablesorter({
115    headers: {
116      0: { sorter: "digit"}, /// => 順位の列を数値としてソート
117      3: { sorter: "digit"} /// => 重要度の列を数値としてソート
118    }
119  });
120});
121
122// 最初はランキングでソート
123$("#myTable").tablesorter({
124  sortList: [[0, 0]]
125});
126
127// document.getElementById("#importance").onclick = function() {
128//   // １行４列目（重要度）クリックしたら発生させる処理を記述する
129//
130// };
131
132</script>
133
134</body>
135</html>
136
137
138

試したこと

3: { sorter: "digit"} /// => 重要度の列を数値としてソート

このコードで数値としてソートするようになったけどまだうまく動きません。
0. 重要度の列のフォームをただの数値に変えてソートしてみると、予想通りちゃんとソートできました。ソート自体はちゃんと動いてるみたいです。
0. outputをinputの前に持ってきましたが数値でソートされませんでした。
0. tablesorter について調べ似たサンプルや方法を探したが見つかりませんでした。

補足情報

最終的にはFC2ブログの記事の中で動かします。
私が使っているブラウザはクローム系で「Kinza」というものです。

参考にしたURL
jQuery UI を利用したテーブル行のドラッグ＆ドロップによる入れ替え方法
https://webllica.com/jquery-ui-table-data-drag-and-drop/

HTMLで作ったテーブルにソート機能を追加する「Tablesorter」の使い方
https://dezanari.com/tablesorter/

至らぬところもあると思いますがご回答宜しくお願い致します！

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

回答2件

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('#priority').addEventListener('click',(e)=>{
4    const tb=e.target.closest('table').querySelector('tbody');
5    const tr=[...tb.querySelectorAll('tr')];
6    tr.sort((x,y)=>{
7      const v1=parseInt(x.querySelector('td:nth-child(3) input').value);
8      const v2=parseInt(y.querySelector('td:nth-child(3) input').value);
9      const v3=parseInt(x.querySelector('td:nth-child(1)').textContent);
10      const v4=parseInt(y.querySelector('td:nth-child(1)').textContent);
11      return v1==v2?(v3-v4):(v2-v1);
12    }).forEach(x=>tb.appendChild(x));
13    
14  });
15});
16</script>
17<table>
18<thead>
19<tr><th>rank</th><th>test</th><th id="priority">priority<th></tr>
20</thead>
21<tbody>
22<tr><td>1</td><td>test1</td><td><input type="range"></td></tr>
23<tr><td>2</td><td>test2</td><td><input type="range"></td></tr>
24<tr><td>3</td><td>test3</td><td><input type="range"></td></tr>
25<tr><td>4</td><td>test4</td><td><input type="range"></td></tr>
26<tr><td>5</td><td>test5</td><td><input type="range"></td></tr>
27</tbody>
28</table>

投稿2021/02/13 17:08

yambejp

総合スコア116724

yambejp

2021/02/13 17:09

ソート後、順位をつけ直すかどうか検討が必要そうです

mumumuka

2021/02/14 11:58

回答ありがとうございます！簡潔でわかりやすいコードありがとうございます。また勉強しつつ参考にさせていただきます。ありがとうございました！

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

ベストアンサー

ライブラリって必要？

js
1<body>
2<table id="myTable" border="1">
3<thead>
4  <tr><th>順位 <th>価値観 <th>説明 <th id="S">重要度
5
6<tbody>
7  <tr>
8    <td>1
9    <td>余暇
10    <td>自分の時間をリラックスして楽しむ
11    <td>
12      <output name="result">0</output>
13      <input  type="range" value="0" min="0" max="5">
14
15  <tr>
16    <td>2
17    <td>寵愛
18    <td>親しい人から愛される
19    <td>
20      <output name="result">0</output>
21      <input  type="range" value="0" min="0" max="5">
22
23  <tr>
24    <td>3
25    <td>愛慕
26    <td>誰かに愛を与える
27    <td>
28      <output name="result">0</output>
29      <input  type="range" value="0" min="0" max="5">
30
31  <tr>
32    <td>4
33    <td>熟達
34    <td>いつもの仕事／作業に習熟する
35    <td>
36      <output  name="result">0</output>
37      <input  type="range" value ="0" min="0" max="5">
38
39  <tr >
40    <td>5
41    <td>現在
42    <td>今の瞬間に集中して生きる
43    <td>
44      <output name="result">0</output>
45      <input  type="range" value="0" min="0" max="5">
46</table>
47
48
49<script>
50
51const s = (a, b)=> +b.value - a.value;
52
53myTable.addEventListener ('input', ({target: e})=> {
54  try {
55    if ('range'== e.type)
56      e.closest ('td').querySelector ('output[name="result"]').value = e.value;
57  } catch (e) { ;}
58}, false);
59
60myTable.addEventListener ('click', ({target: e})=> {
61  if ('S' == e.id) {
62    let es = [...myTable.querySelectorAll ('tbody td input[type="range"]')].sort (s);
63    for (let i = 0, e; e = es[i]; i++) {
64      let tr = e.closest ('tr');
65      tr.parentNode.appendChild (tr);
66      tr.querySelector ('td:first-of-type').textContent = i + 1;
67    }
68  }
69}, false);
70
71</script>
72