質問失礼します。
前提・実現したいこと
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などを使用してみましたが、望んだ結果には至らず。
お手数ですがご教示お願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/11 12:23