配列で作ったtableの中にボタンとチェックボックスを追加したい

Question

前提・実現したいこと

jsでfor文を使ってtableを作成しました、ですが、添付写真の様にtableの最後に
行の「削除ボタン」を作りたいです。
配列やtable関係なしで作ったほうが良いのでしょうか？
それともtableを追加する過程で一緒に追加できるのでしょうか？

もう一つ、配列の最初のセルでチェックボックスもつけようと思っております。
初心者で勉強中なので解説も付けていただけると嬉しいです。
よろしくお願いいたします。

//新しく記入した部分
for (var i = 0; i < 9; i++){
cell = row.insertCell(-1) //で行に <td> を追加して、その<td>を返します。
cell.textContent = todolists[i] //で <td>内にテキストを入れられます。
}
var checkbox = row.insertCell(0);
var clearbtn = row.insertCell(-1);
checkbox.innerHTML = "<td><input type='checkbox'></td>";
clearbtn.innerHTML = "<td><button type='submit'>削除する</td>";

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

<table class="main-table">
    <tr class="table-header">
        <th></th>
        <th>ID</th>
        <th>予定</th>
        <th>日時</th>
        <th>お金</th>
        <th>期日</th>
        <th>持ち物</th>
        <th>メモ</th>
        <th></th>
    </tr>
</table>

var j = 1;
document.getElementById("addButton").onclick = function(){
const todo =document.getElementById('todo').value//予定
const date =document.getElementById('date').value//日時
const price =document.getElementById('price').value//お金
const duedate =document.getElementById('duedate').value//期日
const item =document.getElementById('item').value//持ち物
const memo =document.getElementById('memo').value//メモ

const todolists = [todo,date,price,duedate,item,memo];
console.log(todolists);
mainTable = document.querySelector('.main-table')
// でテーブル要素を取得できます。
row = mainTable.insertRow(-1) //でテーブルに行を追加してその行を返します。

todolists.unshift(j);
todolists.unshift(false);
todolists.push("ここに行削除ボタンを付けたい");

for (var i = 0; i < 9; i++){
cell = row.insertCell(-1) //で行に <td> を追加して、その<td>を返します。
cell.textContent = todolists[i] //で <td>内にテキストを入れられます。
}

j += 1;
console.log(j);
}

補足情報

ここにより詳細な情報を記載してください。

Answer 1

todolists は文字列の配列になっているので、チェックボックスや削除ボタンをそこに入れようとするのは不適切です。入れるのは不可能ではないのですが、妙なコードになるのでお勧めしません。

forループの前後で個別に足すのはいかがでしょうか。

let row = mainTable.insertRow(-1);
let checkboxCell = row.insertCell(-1);
// checkboxCell.innerHTML や checkboxCell.appendChild() などでチェックボックスを足す
...
for (let text of todolists){
  row.insertCell(-1).textContent = text;
}
let buttonCell = row.insertCell(-1);
// buttonCell.innerHTML や buttonCell.appendChild() などで削除ボタンを足す

Comments

[umi3]

先ほどと引き続き回答ありがとうございます。
ずっと考えていてチェックボックスと削除ボタンを追加することが出来たのですが、
削除ボタンがうまくtableの中に入りません。。。
念の為今どんな感じか写真を添付しておきます。

[int32_t]

todolists内ににメモの後に余計な項目が入っているか、forループの後にrow.insertCell()が2回以上呼ばれているんじゃないでしょうか。

「Chrome DevTools ステップ実行」で検索して、デバッグしてみてください。

[umi3]

試行錯誤してやってみた結果なかなかうまく動かなかったので、
tableの外に出してしまっても良いのではないか？
という形で進めることにしました。

Answer 2

<script>
document.addEventListener('click',e=>{
  if(e.target.closest('[value="del"]')){
    e.target.closest('tr').remove();
  }
});
</script>

<table>
<tr><td>1</td><td><input type="button" value="del"></td></tr>
<tr><td>2</td><td><input type="button" value="del"></td></tr>
<tr><td>3</td><td><input type="button" value="del"></td></tr>
</table>