＜今日の発見＞
・object.closest('element');で対象の親要素が取得できる。
→data-idは親要素だけに付ければOK
・new Date().toLocaleDateString("ja-JP", {year: "numeric",month: "2-digit", day: "2-digit"})
→これで(yyyy/MM/dd)の日付が取れる。
参考URL：
--------------------------------------------------------------------
<table>
<tbody>
<tr ID="tr1" data-id="1">
<td style="display:none;"><input name="ID" type="text" ID="ID1" value="1"></td>
<td><input name="date" type="text" ID="承認日1" class="承認日"></td>
<td><button type="button" class="承認Btn">承認</td>
<td><button type="button" class="選択Btn">選択</td>
</tr>
<tr ID="tr2" data-id="2">
<td style="display:none;"><input name="ID" type="text" ID="ID2" value="2"></td>
<td><input name="date" type="text" ID="承認日2" class="承認日"></td>
<td><button type="button" class="承認Btn">承認</td>
<td><button type="button" class="選択Btn">選択</td>
</tr>
<tr ID="tr3" data-id="3">
<td style="display:none;"><input name="ID" type="text" ID="ID3" value="3"></td>
<td><input name="date" type="text" ID="承認日3" class="承認日"></td>
<td><button type="button" class="承認Btn">承認</td>
<td><button type="button" class="選択Btn">選択</td>
</tr>
</tbody>
</table>
--------------------------------
<script defer>
//process------------
// 0.対象を含むtrのタグに「data-id」を付与しておく。
// 1.付与する具体的な処理を記述する（関数作成）
// 2.対象となるボタンを全て取得し、foreachで1で作成した関数をセットする。
//step------------
// 1-1.付与する具体的な処理を記述する（関数作成）
// 選択ボタン処理：選択された行の背景色を変える処理
function click選択Btn(選択Btn) {
選択Btn.addEventListener('click', () => {
let id = 選択Btn.closest('tr').dataset.id;
// 全ての行の背景色をリセットする
for(let i = 1; i <= 3;i++){
let row = document.getElementById('tr' + i);
row.style.backgroundColor = '';
}
// 対象の行の背景色をセットする
let selectedRow = document.getElementById('tr' + id);
selectedRow.style.backgroundColor = 'lightBlue';
});
}
// 1-2.付与する具体的な処理を記述する（関数作成）
// 承認ボタン処理
// 選択された行のIDを取得し、次の画面に遷移する処理
function click承認Btn(承認Btn) {
承認Btn.addEventListener('click', () => {
let 承認id = 承認Btn.closest('tr').dataset.id;
let ID = document.getElementById('ID' + 承認id).getAttribute('value');
location.href = 'pagenext.php/ID=' + ID;
});
}
// 1-3.承認日発行・取消処理
// 選択されたセルの背景色を変え、押下された日を表示・取消する処理
function click承認日(approveDay) {
approveDay.addEventListener('click', () => {
let id = approveDay.closest('tr').dataset.id;
// 対象の行の背景色をセットする
let selected承認日ID = document.getElementById('承認日' + id);
let selected承認日 = selected承認日ID.value;
if(selected承認日 == ""){
selected承認日ID.style.backgroundColor = 'red';
selected承認日ID.value = new Date().toLocaleDateString("ja-JP", {year: "numeric",month: "2-digit", day: "2-digit"})
}else{
selected承認日ID.value = "";
selected承認日ID.style.backgroundColor = 'yellow';
}
});
}
//step------------
// 2.対象となるボタンを全て取得し、foreachで1で作成した関数をセットする。
const 選択Btns = document.querySelectorAll('.選択Btn');
選択Btns.forEach(選択Btn => {
click選択Btn(選択Btn);
});
const 承認Btns = document.querySelectorAll('.承認Btn');
承認Btns.forEach(承認Btn => {
click承認Btn(承認Btn);
});
const approveDays = document.querySelectorAll('.承認日');
approveDays.forEach(approveDay => {
click承認日(approveDay);
});
</script>
＜備考＞
機能を付与するボタンの数が少ないなら、
JSで「foreach」で付与ではなく、タグにonclick属性で関数付与がシンプルかなと思った。
（今回は最大8行になる想定で、onclickでタグに直書きすると文字数増えちゃうので、foreachで処理する）
所要時間：4時間。
ふぁいと！