２つのテーブルのボタンの非活性、活性化をしたいです

前提・実現したいこと

・選択ボタンをクリックされたものを選択済みのテーブルにデータを表示させるという動きを作成しているのですが、
一度選択ボタンをクリックされたメニューはボタンを非活性にし、
もし選択済みテーブルの**解除ボタン(グレーのボタン)をクリックしたら、クリックされたデータの選択ボタン(緑色のボタン)**を再度使用できるような作りをしたいのですが、

現在だと非活性はできるのですが、解除ボタンを押した際に、再度選択ボタンを使用できるようになっていません。
js初心者の為、データの移動等いいやり方が思いつきません。
皆様の知恵をお貸しいただきたいです。よろしくお願いいたします。

該当のソースコード

html
1<div class="container table-responsive mb-3" style="max-height: 60vh; overflow-auto: scroll;">
2        <table class="table table-hover table-bordered">
3            <thead class="thead-light" style="position: sticky; top: 0; z-index: 1;">
4                <tr>
5                    <th scope="col" class="text-center">選択</th>
6                    <th scope="col" class="text-center">メニュー名</th>
7                    <th scope="col" class="text-center">メニューCD</th>
8                </tr>
9            </thead>
10            <tbody>
11                <tr>
12                    <td class="text-center"><button class="btn btn-success ml-2" type="button" onclick="selectStore(this)">選択</button></td>
13                    <td>カレー</td>
14                    <td>A11</td>
15                </tr>
16                <tr>
17                    <td class="text-center"><button class="btn btn-success ml-2" type="button" onclick="selectStore(this)">選択</button></td>
18                    <td>ハンバーグ</td>
19                    <td>A12</td>
20                </tr>
21                <tr>
22                    <td class="text-center"><button class="btn btn-success ml-2" type="button" onclick="selectStore(this)">選択</button></td>
23                    <td>カツ丼</td>
24                    <td>B3</td>
25                </tr>
26                <tr>
27                    <td class="text-center"><button class="btn btn-success ml-2" type="button" onclick="selectStore(this)">選択</button></td>
28                    <td>焼き魚</td>
29                    <td>C1</td>
30                </tr>
31            </tbody>
32        </table>
33    </div>
34
35    <h5>選択済み店舗</h5>
36    <div class="container table-responsive" style="max-height: 60vh; overflow-auto: scroll;">
37        <table class="table table-hover table-bordered" id="targetTable">
38            <thead class="thead-light" style="position: sticky; top: 0; z-index: 1;">
39                <tr>
40                    <th scope="col" class="text-center">解除</th>
41                    <th scope="col" class="text-center">メニュー名</th>
42                    <th scope="col" class="text-center">メニューCD</th>
43                </tr>
44            </thead>
45            <tbody>
46            </tbody>
47        </table>
48    </div>

javaScript
1<script type="application/javascript">
2
3        function selectStore(obj) {
4
5            let Row = obj.closest('tr')
6            let Cells = Row.getElementsByTagName("td")
7            let name = Cells[1].innerText
8            let code = Cells[2].innerText
9            this.newRow(name, code)
10            obj.disabled = true
11
12        }
13
14        function newRow(name, code) {
15
16            let table = document.getElementById('targetTable')
17            let newRow = table.insertRow()
18            let btn = newRow.insertCell(0)
19            newRow.innerHTML = '<td style="text-align: center;"><button class="btn btn-secondary ml-2 RowBtn" type="button" onclick="deleteStore(this)">解除</button></td>'
20
21            let newCell = newRow.insertCell(1)
22            let newText = document.createTextNode(name)
23            newCell.setAttribute("id", "selectName")
24            newCell.appendChild(newText)
25
26            newCell = newRow.insertCell(2)
27            newText = document.createTextNode(code)
28            newCell.setAttribute("id", "selectCd")
29            newCell.appendChild(newText)
30
31            const input = document.createElement("input")
32            input.setAttribute("type", "hidden")
33            input.setAttribute("name", "menu_name[]")
34            input.setAttribute("class", "menuName")
35            input.value = name
36            document.getElementById("inputForm").appendChild(input)
37
38            const input2 = document.createElement("input")
39            input2.setAttribute("type", "hidden")
40            input2.setAttribute("name", "menu_cd[]")
41            input2.setAttribute("class", "menuCd")
42            input2.value = code
43            document.getElementById("inputForm").appendChild(input2)
44
45        }
46
47        function deleteStore(obj) {
48            let tr = obj.parentNode.parentNode;
49            tr.parentNode.deleteRow(tr.sectionRowIndex);
50
51            let Row = obj.closest('tr')
52            let Cells = Row.getElementsByTagName("td")
53            let deletedMenuName = Cells[1].innerText
54            let deletedMenuCd = Cells[2].innerText
55
56            for (let element of [...document.getElementsByClassName('menuCd')]) {
57                if (element.value == deletedMenuName)
58                    element.remove();
59            }
60            for (let element of [...document.getElementsByClassName('menuName')]) {
61                if (element.value == deletedMenuCd)
62                    element.remove();
63            }
64        }
65
66    </script>

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

回答1件

ベストアンサー

ざっくりリファクタリングします

javascript
1<style>
2tr.disabled td{
3  background-Color:gray;
4}
5</style>
6<script>
7document.addEventListener('click',e=>{
8  const btn1=e.target.closest('.btn');
9  if(btn1?.closest('#t1')){
10    btn1.setAttribute('data-index',[...document.querySelectorAll('#t1 .btn')].indexOf(btn1));
11    const tr=btn1.closest('tr').cloneNode(true);
12    const btn2=tr.querySelector('.btn');
13    btn2.classList.remove('btn-success');
14    btn2.classList.add('btn-secondary');
15    btn2.textContent='解除';
16    document.querySelector('#t2 tbody').appendChild(tr);
17    btn1.disabled=true;
18    btn1.closest('tr').classList.add('disabled')
19  }
20  if(btn1?.closest('#t2')){
21    const btn2=document.querySelector(`#t1 .btn[data-index="${btn1.dataset["index"]}"]`);
22    btn2.disabled=false;
23    btn2.closest('tr').classList.remove('disabled');
24    btn1.closest('tr').remove();
25  }
26});
27</script>
28<div class="container table-responsive mb-3" style="max-height: 60vh; overflow-auto: scroll;">
29<table id="t1" class="table table-hover table-bordered">
30<thead class="thead-light" style="position: sticky; top: 0; z-index: 1;">
31<tr>
32<th scope="col" class="text-center">選択</th>
33<th scope="col" class="text-center">メニュー名</th>
34<th scope="col" class="text-center">メニューCD</th>
35</tr>
36</thead>
37<tbody>
38<tr>
39<td class="text-center"><button class="btn btn-success ml-2" type="button">選択</button></td>
40<td>カレー</td>
41<td>A11</td>
42</tr>
43<tr>
44<td class="text-center"><button class="btn btn-success ml-2" type="button">選択</button></td>
45<td>ハンバーグ</td>
46<td>A12</td>
47</tr>
48<tr>
49<td class="text-center"><button class="btn btn-success ml-2" type="button">選択</button></td>
50<td>カツ丼</td>
51<td>B3</td>
52</tr>
53<tr>
54<td class="text-center"><button class="btn btn-success ml-2" type="button">選択</button></td>
55<td>焼き魚</td>
56<td>C1</td>
57</tr>
58</tbody>
59</table>
60</div>
61<h5>選択済み店舗</h5>
62<div class="container table-responsive" style="max-height: 60vh; overflow-auto: scroll;">
63<table id="t2" class="table table-hover table-bordered" id="targetTable">
64<thead class="thead-light" style="position: sticky; top: 0; z-index: 1;">
65<tr>
66<th scope="col" class="text-center">解除</th>
67<th scope="col" class="text-center">メニュー名</th>
68<th scope="col" class="text-center">メニューCD</th>
69</tr>
70</thead>
71<tbody>
72</tbody>
73</table>
74</div>
75