0

以下に示すようなTodoリストを作りたいと考えています。

ただ、ID、コメント、状態の直下にそれぞれ入力した値を表示することが出来ません(ズレて表示されている)

試した事

tableタグを用いてtr,tdなどを用いてみたのですが、上手く解決することが出来ませんでした。

知りたいこと

ID、コメント、状態の直下に入力された値を表示する方法

お手数ですがご確認宜しくお願い致します。


期待する動作画面

現状のソースコード

<!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>
        <tr>ID コメント 状態</tr>
      </thead>
      <tbody class ="addTask-target">
        <tr>          
        </tr>     
      </tbody>
    </table>
​
    <h2>新規タスクの追加</h2>
    <input class="addTask-value" type="text" />
    <button class="addTask-trigger" type="button">追加</button>
  <script src="js/main.js"></script>
</body>
</html>
'use strict';
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('thead');
    const addButton = document.createElement('button');
    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;
    tableItem.append(idSpan);
    const taskSpan = document.createElement('span');
    taskSpan.innerText = task;
    tableItem.append(task);

     //入力タスクを表示
     addTaskTarget.appendChild(tableItem);   
    // 作業中ボタンを追加
    tableItem.appendChild(addButton);    
    // 削除ボタンを追加
    tableItem.appendChild(removeButton);

};
// 追加ボタンに対して、タスク登録イベントを設定
addTaskTrigger.addEventListener('click', event => {
    const task = addTaskValue.value;
    addTask(task,nextId ++);
    addTaskValue.value = '';
});
});

1 件の回答 1

2

先に解決したコード全体を載せます。
基本的にインデントのズレ等は質問者のままとします。
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の解説のところで記載しましたとおり、削除ボタンのヘッダータイトルは「削除ボタン」というのを補って下記のようになるようにしました。もし「削除ボタン」という文言をいれたくない場合はテーブルの機能(書き方)について色々調べてみるとよいと考えます。

画像の説明をここに入力

2
  • ご返信遅くなり申し訳ありません。上記内容で解決致しました。ありがとうございました。
    – kanata
    2020年6月17日 7:31
  • @kanata 解決した場合は回答の「承認」(チェックマーク)をつけるのをよろしくおねがいします。 2020年6月17日 8:15

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。