javascriptを使って、タクシーの相乗り表作成ツールを作りたい。

前提・実現したいこと

チェックの入ったメンバーの名前を
表の行にAとBが混在しないように左から距離順に出力し
各行の余ったセルにHを出力したいです。
（例えば一行目の相乗り２までAの名前で埋め、相乗り３にはHを入れる）

どのようにすれば、実装できるのでしょうか。

言葉足らずな部分があるかと思いますが、お力添え願います。

該当のソースコード

HTML
1<table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333">
2        <tr>
3            <th>番長</th>
4            <th>相乗り１</th>
5            <th>相乗り２</th>
6            <th>相乗り３</th>
7        </tr>
8
9        <tr>
10            <td id="1st1"></td>
11            <td id="2nd1"></td>
12            <td id="3rd1"></td>
13            <td id="4th1"></td>
14        </tr>
15
16        <tr>
17            <td id="1st2"></td>
18            <td id="2nd2"></td>
19            <td id="3rd2"></td>
20            <td id="4th2"></td>
21        </tr>
22...以下同様
23
24    </table>
25<!-- メンバー追加フォーム -->
26    <form action="#" method="post">
27        <p>名前：<br>
28            <input type="text" name="name"></p>
29        <p>ルート：<br>
30            <input type="text" name="root"></p>
31        <p>距離：<br>
32            <input type="text" name="distance"></p>
33    </form>
34
35    <button type="submit" value="追加">追加</button><br>
36
37    当日メンバー<br>
38    <label>
39        <input type="checkbox" name="member" data-distance=3 value="名前A3" data-root="a">名前A3
40    </label>
41    <label>
42        <input type="checkbox" name="member" data-distance=1 value="名前A1" data-root="a">名前A1
43    </label>
44    <label>
45        <input type="checkbox" name="member" data-distance=2 value="名前A2" data-root="a">名前A2
46    </label>
47
48    ...以下同様
49
50<button type="submit" value="go" id="go">決定</button>

javascript
1// 各セルのidを取得
2var first1 = document.getElementById('1st1');
3var second1 = document.getElementById('2nd1');
4var third1 = document.getElementById('3rd1');
5var fourth1 = document.getElementById('4th1');
6
7var first2 = document.getElementById('1st2');
8var second2 = document.getElementById('2nd2');
9var third2 = document.getElementById('3rd2');
10var fourth2 = document.getElementById('4th2');
11
12
13// 取得ボタン
14$('#go').on('click', function() {
15    let checked = [...document.querySelectorAll('input[name="member"]:checked')];
16    console.log(checked)
17
18// グループごとに分ける
19    var $aGroup = $('[name="member"][data-root="a"]:checked')
20    console.log($aGroup);
21    var $bGroup = $('[name="member"][data-root="b"]:checked')
22    console.log($bGroup);
23    var $hGroup = $('[name="member"][data-root="h"]:checked')
24    console.log($hGroup);
25
26// 距離が遠い順にする
27var to = function(x,y){
28    return $(x).data('distance')-$(y).data('distance');
29  }
30  // 距離が近い順にする
31var from = function(x,y){
32    return $(y).data('distance')-$(x).data('distance');
33  }
34
35// 各グループのvalの呼び出し
36    var toA= $aGroup.get().sort(to).map(function(x){
37        return $(x).val();
38      });
39      console.log(toA)
40
41    var toB= $bGroup.get().sort(to).map(function(x){
42        return $(x).val();
43      });
44      console.log(toB)
45    var toH= $hGroup.get().sort(to).map(function(x){
46        return $(x).val();
47      });
48      console.log(toH)
49
50// タクシーに初めに乗る人（番長）が入るセル
51      var $1st = $('[id^=1st]');
52      console.log($1st);
53
54これ以降で例えば$1stにdata-root="a"のデータをもつ人を入れ、その場合
55それ以降、その行にはチェックの入ったdata-root="a"を持つ人の名前を挿入する。
56挿入後に同じ行のセルに空いているセルがあれば、data-root="h"の名前を挿入する。
57このような処理をしたいです。
58
59
60    });

試したこと

補足情報（FW/ツールのバージョンなど）

後から、メンバーを追加できるようにする予定です。
ここにより詳細な情報を記載してください。

gpsoft

2021/03/12 12:16

仕様についての質問ですが、仮に全員がチェックされてたら、表はどうなるべきですか? 1台目がA5,A4,A3,A2 2台目がA1,H5,H4,H3 3台目がB5,B4,B3,B2 4台目がB1,H2,H1 で合ってます?

hemuu

2021/03/12 19:58

おっしゃる通りです！

gpsoft

2021/03/13 03:18

「どのようにすれば、実装できるのでしょうか。」これだと、なかなか回答が付かないかもですね。コードの最後にご自身でコメントされてることを、もう少し実装してみれば、より具体的な疑問が浮かび上がってくるかもしれませんよ。エレガントかつ汎用的なコードを書こうとしすぎると挫折しがちなので、まずは上記の「全員チェックされてる」ケースを考えて書いてみたらどうでしょう? ・Aの乗客を4人ずつの塊に分け、空車のタクシーに座らせる・Bの乗客を4人ずつの塊に分け、空車のタクシーに座らせる・Hの乗客を順に、空席に座らせるみたいな感じでしょうか。「配列をN個ずつの塊に分ける」とか、「空車のタクシー(tr)を見つける」とか、「空席(td)を見つける」といった関数を作っておくと便利そうですね。

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

回答1件

js
1<body>
2<table border="1" id="fuga">
3  <thead><tr><th>番長 <th>相乗り１ <th>相乗り２ <th>相乗り３
4</table>
5
6<form>
7  <p>名前：<br><input type="text" name="name"></p>
8  <p>ルート：<br><input type="text" name="root"></p>
9  <p>距離：<br><input type="text" name="distance"></p>
10  <button type="button" value="追加">追加</button>
11</form>
12
13
14<h3>当日メンバー</h3>
15<ul>
16  <li><label><input type="checkbox" name="member" data-distance="3" value="名前A3" data-root="a">名前A3</label>
17  <li><label><input type="checkbox" name="member" data-distance="1" value="名前A1" data-root="a">名前A1</label>
18  <li><label><input type="checkbox" name="member" data-distance="2" value="名前A2" data-root="a">名前A2</label>
19  <li><label><input type="checkbox" name="member" data-distance="4" value="名前A4" data-root="a">名前A4</label>
20  <li><label><input type="checkbox" name="member" data-distance="5" value="名前A5" data-root="a">名前A5</label>
21
22  <li><label><input type="checkbox" name="member" data-distance="1" value="名前B1" data-root="b">名前B1</label>
23  <li><label><input type="checkbox" name="member" data-distance="2" value="名前B2" data-root="b">名前B2</label>
24  <li><label><input type="checkbox" name="member" data-distance="3" value="名前B3" data-root="b">名前B3</label>
25  <li><label><input type="checkbox" name="member" data-distance="4" value="名前B4" data-root="b">名前B4</label>
26  <li><label><input type="checkbox" name="member" data-distance="5" value="名前B5" data-root="b">名前B5</label>
27
28  <li><label><input type="checkbox" name="member" data-distance="1" value="名前H1" data-root="h">名前H1</label>
29  <li><label><input type="checkbox" name="member" data-distance="2" value="名前H2" data-root="h">名前H2</label>
30  <li><label><input type="checkbox" name="member" data-distance="3" value="名前H3" data-root="h">名前H3</label>
31  <li><label><input type="checkbox" name="member" data-distance="4" value="名前H4" data-root="h">名前H4</label>
32  <li><label><input type="checkbox" name="member" data-distance="5" value="名前H5" data-root="h">名前H5</label>
33</ul>
34<button type="button" onclick="hoge()">決定</button>
35
36
37<script>
38function hoge () {
39  const
40    N = 4,
41    fn = (b, a)=> +a.dataset.distance - b.dataset.distance,
42    val = e=> e.value,
43    ga = [...document.querySelectorAll ('input[name="member"][data-root="a"]:checked')].sort (fn),
44    gb = [...document.querySelectorAll ('input[name="member"][data-root="b"]:checked')].sort (fn),
45    gh = [...document.querySelectorAll ('input[name="member"][data-root="h"]:checked')].sort (fn),
46    ary = [];
47
48  while (ga.length) ary.push (ga.splice (0, N));
49  while (gb.length) ary.push (gb.splice (0, N));
50  for (let a of ary) if (a.length < N) a.push (...gh.splice (0, N - a.length));
51  while (gh.length) ary.push (gh.splice (0, N));
52
53  fuga.appendChild (ary2tbody (ary.map (a=> a.map (val))));
54}
55
56function ary2tbody (ary, tbody=document.createElement('tbody')) {
57  return ary.reduce((a,b)=>(b.reduce((c,d)=>(c.insertCell().textContent=d,c),a.insertRow()),a),tbody);
58}
59
60</script>
61