質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

858閲覧

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

umi3

総合スコア18

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/06/17 02:13

前提・実現したいこと

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

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

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

html

1<table> 2 <tr> 3 <th>予定</th> 4 <td><input id="todo" type="text" placeholder="予定を入力" value="aaa"></td> 5 <th>日時</th> 6 <td><input id="date" type="datetime-local"></td> 7 </tr> 8 <tr> 9 <th>お金</th> 10 <td><input id="price" type="text" placeholder="金額を入力" value="ddd"></td> 11 <th>期日</th> 12 <td><input id="duedate" type="datetime-local"></td> 13 </tr> 14 <tr> 15 <th>持ち物</th> 16 <td><input id="item" type="text" value="fff"></td> 17 <th>メモ</th> 18 <td><input id="memo" type="text" value="ggg"></td> 19 <td id="addButton"><button type="submit">登録する</button></td> 20 </tr> 21</table> 22<table class="main-table"> 23 <tr class="table-header"> 24 <th></th> 25 <th>ID</th> 26 <th>予定</th> 27 <th>日時</th><th> 28 <th>お金</th> 29 <th>持ち物</th> 30 <th>メモ</th> 31 <th>期日</th> 32 <th></th> 33 </tr> 34 <tr id="table"></tr> 35</table>

css

1document.getElementById("addButton").onclick = function(){ 2const todo =document.getElementById('todo').value//予定 3const date =document.getElementById('date').value//日時 4const price =document.getElementById('price').value//お金 5const duedate =document.getElementById('duedate').value//期日 6const item =document.getElementById('item').value//持ち物 7const memo =document.getElementById('memo').value//メモ 8 9const todolists = [todo,date,price,duedate,item,memo]; 10var newtable = document.createElement('tr'); 11for (var i = 0; i < 6; i++){ 12table.innerHTML = todolists[i]; 13}

補足情報

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

ボタンが押されたら、「テーブル 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>内にテキストを入れられます。

投稿2021/06/17 02:29

編集2021/06/17 02:32
int32_t

総合スコア20663

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

umi3

2021/06/17 02:56

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

0

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

投稿2021/06/17 02:33

編集2021/06/17 02:36
itagagaki

総合スコア8402

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問