jsを使ってテーブルを追加したい

Question

前提・実現したいこと

「登録する」ボタンを押したら「todolists」の中に入れられたデータをテーブルに1行ごとに追加していきたいと思っています。
添付した写真の様に、どんどん下にテーブルを追加していきたいです。

そこでforをつかって繰り返しかなと思ったのですが、うまく出来ません。
「こっちの方法のほうが良いよ」「これを書く場所が間違っている」などあれば教えていただきたいです、
よろしくおねがいします！

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

<table>
    <tr>
        <th>予定</th>
        <td><input id="todo" type="text" placeholder="予定を入力" value="aaa"></td>
        <th>日時</th>
        <td><input id="date" type="datetime-local"></td>
    </tr>
    <tr>
        <th>お金</th>
        <td><input id="price" type="text" placeholder="金額を入力" value="ddd"></td>
        <th>期日</th>
        <td><input id="duedate" type="datetime-local"></td>
    </tr>
    <tr>
        <th>持ち物</th>
        <td><input id="item" type="text" value="fff"></td>
        <th>メモ</th>
        <td><input id="memo" type="text" value="ggg"></td>
        <td id="addButton"><button type="submit">登録する</button></td>
    </tr>
</table>
<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></th>
    </tr>
    <tr id="table"></tr>
</table>

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];
var newtable = document.createElement('tr');
for (var i = 0; i < 6; i++){
table.innerHTML = todolists[i];
}

補足情報

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

Answer 1

ボタンが押されたら、「テーブル main-table に <tr><td></td><td></td><td>予定の値</td><td>日時の値</td><td>お金の値</td><td>期日の値</td><td>持ち物の値</td><td>メモの値</td></tr> という構造の要素を追加」がしたいことですよね。質問文のコードでは <td> を作っていませんし、table.innerHTMLはループ中で上書きされています。

• mainTable = document.querySelector('.main-table') でテーブル要素を取得できます。
• row = mainTable.insertRow(-1) でテーブルに行を追加してその行を返します。
• cell = row.insertCell(-1) で行に <td> を追加して、その<td>を返します。
• cell.textContent = totodlists[i] で <td>内にテキストを入れられます。

Comments

[umi3]

とりあえず表に追加することが出来ました！
細かい部分は自分で直します！
ご丁寧にありがとうございました！！

Answer 2

回答を撤回します。
int32_tさんの回答が正解です。