Skip to main content
本文に 20 文字追加
ソース リンク
shingo.nakanishi
  • 6,543
  • 8
  • 59
  • 99

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

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

おしいですね。tableタグがうまく使えていなかったのが主な原因のようです。

HTMLの解説のところで記載しましたとおり、削除ボタンのヘッダータイトルは「削除ボタン」というのを補って下記のようになるようにしました。

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

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

本文に 13 文字追加
ソース リンク
shingo.nakanishi
  • 6,543
  • 8
  • 59
  • 99

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

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

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

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

修正後の見た目

削除HTMLの解説のところで記載しましたとおり、削除ボタンのヘッダータイトルは「削除ボタン」というのを補って下記のようになるようにしました。

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

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

削除ボタンのヘッダータイトルは「削除ボタン」というのを補って下記のようになるようにしました。

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

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

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

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

修正後の見た目

HTMLの解説のところで記載しましたとおり、削除ボタンのヘッダータイトルは「削除ボタン」というのを補って下記のようになるようにしました。

本文に 13 文字追加
ソース リンク
shingo.nakanishi
  • 6,543
  • 8
  • 59
  • 99

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

生成されるHTML

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

HTMLまたもともとHTMLもおかしいところです

HTMLのおかしいところ

JavaScriptのおかしいところ

JavaScriptのおかしいところ

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

あくまで、ねらい通りにレイアウトすることを目標としたので、他の必要なコードが消えているかもしれません。参考として利用してください。

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

HTMLのおかしいところ

JavaScriptのおかしいところ

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

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

生成されるHTML

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

HTMLのおかしいところ

JavaScriptのおかしいところ

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

本文に 124 文字追加
ソース リンク
shingo.nakanishi
  • 6,543
  • 8
  • 59
  • 99
読み込んでいます
ソース リンク
shingo.nakanishi
  • 6,543
  • 8
  • 59
  • 99
読み込んでいます