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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

1回答

937閲覧

Todoリスト DOMで操作したHTML表示に関して

mikeikeikename

総合スコア15

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2020/06/11 10:28

質問失礼します。

前提・実現したいこと

https://gyazo.com/d2c1c87a05c786e2ded8873d13fd0a0d

こちらのようなTodoリストを作成したいと考えております。

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

①ID、コメント、状態に関する内容をDOMを用いてHTMLに表示することが出来たのですが、
なぜか表示されたものが下に下に行くのではなく、右に表示されてしまいます。
②また、文字やボタンの間に隙間が無いのでこちらも隙間を適切に開けたいと思っています。

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel ="stylesheet" href="css/style.css"> 7 <title>Todoリスト</title> 8</head> 9<body> 10 <h1>Todoリスト</h1> 11 <p> 12 <input type="radio" name="status" value="1" checked="checked">全て 13 <input type="radio" name="status" value="2">作業中 14 <input type="radio" name="status" value="3">完了 15 </p> 16 17<p></p> 18 19 <table> 20 <thead class ="addTask-target"> 21 <tr> 22 <th>ID</th> 23 <th>コメント</th> 24 <th>状態</th> 25 </tr> 26 </thead> 27 <tbody class ="addTask-target"> 28 <tr> 29 30 </tr> 31 32 </tbody> 33 </table> 34 35 <h2>新規タスクの追加</h2> 36 <input class="addTask-value" type="text" /> 37 <button class="addTask-trigger" type="button">追加</button> 38 <script src="js/main.js"></script> 39</body> 40</html>

Javascript

1'use strict'; 2 3document.addEventListener('DOMContentLoaded', function() { 4 5 // 必要なDOM要素を取得。 6 // ボタン 7 const addTaskTrigger = document.getElementsByClassName('addTask-trigger')[0]; 8 //テーブルhead 9 const addTaskTarget = document.getElementsByClassName('addTask-target')[0]; 10 // 入力するところ 11 const addTaskValue = document.getElementsByClassName('addTask-value')[0]; 12 13 //インデックスを定義 14 let nextId = 0; 15 16 const addTask = (task,id) => { 17 // 表のタグを生成する 18 const tableItem=document.createElement('td'); 19 const addButton = document.createElement('button'); 20 const removeButton = document.createElement('button'); 21 22 // それぞれ作業中、削除という言葉をボタンに入れる 23 addButton.innerText = '作業中'; 24 removeButton.innerText = '削除'; 25 //ボタンを押したら以下の作業をする 26 removeButton.addEventListener('click', () => removeTask(removeButton)); 27 28 // IDを表示するspan要素を作成して listItem に追加 29 const idSpan = document.createElement('span'); 30 idSpan.innerText = id; 31 tableItem.append(idSpan); 32 33 // タスクを表示するspan要素を作成して listItem に追加 34 const taskSpan = document.createElement('span'); 35 taskSpan.innerText = task; 36 tableItem.append(taskSpan); 37 38 39 // 作業中ボタンを追加 40 tableItem.appendChild(addButton); 41 // 削除ボタンを追加 42 tableItem.appendChild(removeButton); 43 //入力タスクを表示 44 addTaskTarget.appendChild(tableItem); 45 }; 46 47 // 追加ボタンに対して、タスク登録イベントを設定 48 addTaskTrigger.addEventListener('click', event => { 49 const task = addTaskValue.value; 50 addTask(task,nextId ++); 51 addTaskValue.value = ''; 52 }); 53}); 54

試したこと

①に対して:tableにつけてる class ="addTask-target">を
thや、trなどに変えてみました。少し変化はありましたが、望んだ結果には至らず。
②に対して:CSSでmarginやPaddingなどを使用してみましたが、望んだ結果には至らず。

お手数ですがご教示お願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

theadにthやtdを追加しているからでしょう
trをつくってthやtdを埋め込んで、theadやtbodyにappendしてください

投稿2020/06/11 11:19

編集2020/06/11 11:20
yambejp

総合スコア114572

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

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

mikeikeikename

2020/06/11 12:23

いつもありがとうございます。 重ねてのご質問申し訳ありません。 テーブルの内容が左右で詰まってしまうのですが、これはCSSでどうこうはなく、ID、コメント、状態の三つとappendする内容を紐づける、という認識でよろしいでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問