67662


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

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

### 試した事

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

### 知りたいこと

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

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

* * *

### 期待する動作画面

> ![](https://i.gyazo.com/d2c1c87a05c786e2ded8873d13fd0a0d.gif)

### 現状のソースコード

[code]

    <!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>
    
[/code]

[code]

    '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 = '';
    });
    });
    
[/code]


CC BY-SA 4.0
2020-06-13T03:36:28.337
67612
2020-06-14T14:57:30.173
2020-06-13T16:44:27.720
3060
40610
question
javascript
JavascriptでTodoリストを作る


先に解決したコード全体を載せます。  
**基本的にインデントのズレ等は質問者のままとします。**  
**JavaScriptはHTML内に埋め込む形にしています。**

あくまで、ねらい通りにレイアウトすることを目標としたので、他の必要なコードが消えているかもしれません。参考として利用してください。(JavaScript側は`const
addTask = (task,id) =>
{}`の中しか触っていないはずなので、消えていてもこの中だけだと思います。HTML側はテーブルに関するところしか触っていないはずです)

[code]

    <!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>
    
[/code]

# 解説

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

おしいですね。あとちょっとだったかもしれませんね。  
tableタグがうまく使えていなかったのが主な原因のようです。

## おかしな点を探る

### 生成されるHTML

あなたが書いたコードによって追加ボタンを押すと、どのようなHTMLが生成されているか確認してみましょう。  
下記のような感じになっていました。

[code]

    <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>
    
[/code]

### またもともとのHTMLもおかしいです

HTMLのおかしいところ

[code]

    <tr>ID　コメント　状態</tr>
    
[/code]

GIFでは4つのデータを表示したいようですが、これでは3つのデータを表示したいように受け取れます。  
しかも`<tr>`の中に直接文字を打ち込んでいるのでこれでは機能しません。

下記のように修正しています。

[code]

      <thead>
        <th>ID</th>
        <th>コメント</th>
        <th>状態</th>
        <th>削除ボタン</th>
      </thead>
    
[/code]

### JavaScriptのおかしいところ

HTML側と似たようなミスをしていますが、いきなりすべてのデータを `thead` におしこみすぎています。`td`
をちゃんと作って一つずつHTMLを構築していくように修正しました。（あと `tbody`の中で使うので `thead` ではなく `tr` がよいです）

## 修正後の見た目

HTMLの解説のところで記載しましたとおり、削除ボタンのヘッダータイトルは「削除ボタン」というのを補って下記のようになるようにしました。もし「削除ボタン」という文言をいれたくない場合はテーブルの機能（書き方）について色々調べてみるとよいと考えます。

[![画像の説明をここに入力](https://i.stack.imgur.com/oIk67.png)](https://i.stack.imgur.com/oIk67.png)


CC BY-SA 4.0
2020-06-14T14:34:00.027
67662
2020-06-14T14:57:30.173
2020-06-14T14:57:30.173
9008
9008
67612
answer