先に解決したコード全体を載せます。
基本的にインデントのズレ等は質問者のままとします。
JavaScriptはHTML内に埋め込む形にしています。
あくまで、ねらい通りにレイアウトすることを目標としたので、他の必要なコードが消えているかもしれません。参考として利用してください。(JavaScript側はconst addTask = (task,id) => {}
の中しか触っていないはずなので、消えていてもこの中だけだと思います。HTML側はテーブルに関するところしか触っていないはずです)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel ="stylesheet" href="css/style.css">
<title>Todoリスト</title>
</head>
<body>
<h1>Todoリスト</h1>
<p>
<input type="radio" name="status" value="1" checked="checked">全て
<input type="radio" name="status" value="2">作業中
<input type="radio" name="status" value="3">完了
</p>
<p></p>
<table>
<thead>
<th>ID</th>
<th>コメント</th>
<th>状態</th>
<th>削除ボタン</th>
</thead>
<tbody class ="addTask-target"></tbody>
</table>
<h2>新規タスクの追加</h2>
<input class="addTask-value" type="text" />
<button class="addTask-trigger" type="button">追加</button>
<script src="js/main.js"></script>
</body>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 必要なDOM要素を取得。
const addTaskTrigger = document.getElementsByClassName('addTask-trigger')[0];
const addTaskTarget = document.getElementsByClassName('addTask-target')[0];
const addTaskValue = document.getElementsByClassName('addTask-value')[0];
//ID用のインデックスを定義
let nextId = 0;
const addTask = (task,id) => {
// 表のタグを生成する
const tableItem = document.createElement('tr');
const addButtonTd = document.createElement('td');
const addButton = document.createElement('button');
const removeButtonTd = document.createElement('td');
const removeButton = document.createElement('button');
// それぞれ作業中、削除という言葉をボタンに入れる
addButton.innerText = '作業中';
removeButton.innerText = '削除';
//ボタンを押したら以下の作業をする
removeButton.addEventListener('click', () => removeTask(removeButton));
// IDを表示するspan要素を作成して tableItem に追加
const idSpan = document.createElement('span');
idSpan.innerText = id;
const idSpanTd = document.createElement('td');
idSpanTd.append(idSpan);
const taskSpan = document.createElement('span');
const taskSpanTd = document.createElement('td');
taskSpan.innerText = task;
taskSpanTd.append(taskSpan);
addButtonTd.append(addButton);
removeButtonTd.append(removeButton);
tableItem.append(idSpanTd);
tableItem.append(taskSpanTd);
tableItem.append(addButtonTd);
tableItem.append(removeButtonTd);
//入力タスクを表示
addTaskTarget.appendChild(tableItem);
};
// 追加ボタンに対して、タスク登録イベントを設定
addTaskTrigger.addEventListener('click', event => {
const task = addTaskValue.value;
addTask(task,nextId ++);
addTaskValue.value = '';
});
});
</script>
</html>
解説
tableタグを用いてtr,tdなどを用いてみたのですが、上手く解決することが出来ませんでした。
おしいですね。あとちょっとだったかもしれませんね。
tableタグがうまく使えていなかったのが主な原因のようです。
おかしな点を探る
生成されるHTML
あなたが書いたコードによって追加ボタンを押すと、どのようなHTMLが生成されているか確認してみましょう。
下記のような感じになっていました。
<tbody class="addTask-target">
<tr>
</tr>
<thead><span>0</span>aaa<button>作業中</button><button>削除</button></thead><thead><span>1</span>bbb<button>作業中</button><button>削除</button></thead></tbody>
またもともとのHTMLもおかしいです
HTMLのおかしいところ
<tr>ID コメント 状態</tr>
GIFでは4つのデータを表示したいようですが、これでは3つのデータを表示したいように受け取れます。
しかも<tr>
の中に直接文字を打ち込んでいるのでこれでは機能しません。
下記のように修正しています。
<thead>
<th>ID</th>
<th>コメント</th>
<th>状態</th>
<th>削除ボタン</th>
</thead>
JavaScriptのおかしいところ
HTML側と似たようなミスをしていますが、いきなりすべてのデータを thead
におしこみすぎています。td
をちゃんと作って一つずつHTMLを構築していくように修正しました。(あと tbody
の中で使うので thead
ではなく tr
がよいです)
修正後の見た目
HTMLの解説のところで記載しましたとおり、削除ボタンのヘッダータイトルは「削除ボタン」というのを補って下記のようになるようにしました。もし「削除ボタン」という文言をいれたくない場合はテーブルの機能(書き方)について色々調べてみるとよいと考えます。