質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

jQueryでの動的テーブル行追加

akatsuki
akatsuki

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

3回答

0評価

0クリップ

5715閲覧

投稿2019/08/25 05:17

下記のコードで行追加ボタンをクリックした時にテーブルに行が追加するjQueryを記述したのですが追加自体はできるですが追加した時に行のボタン0ボタンの次のTD内(bangouってクラスを付与しているinputのvalueに代入していきたい)に番号を1行目から順番になるようにしたいのでがやり方が分からず詰まっています。

追加ボタンを押した時のイメージ↓

列1列2
ボタン0
ボタン0
ボタン0

HTML5

<button id='testtable_row_add'>行追加</button> <table id='testtable'> <tbody></tbody> </table>

jQuery

function addRow(idx){ var tags; tags += "<tr> <td class=text-center rowspan='4'> <button type=button data-idx='" + idx + "' class='btn deleterowbtn'>ボタン0</button></td>"; tags += "<td rowspan=4><input class='form-control bangou' type=text value=''></input></td>"; tags += "<td style='display:flex'><input name='hoge[]' id='hoge1" + idx + "' class=form-control type=text readonly><button id='bid" + idx + "' data-serch='" + idx + "' type='button'>ボタン1</button><input name='hogehoge[]' id='hoge2" + idx + "' class='form-control col-2' type=text></td>"; tags += "<td><input name='hogehogehoge[]' id='hoge3" + idx + "' class=form-control type=text></td>"; tags += "<td rowspan=4 class='text-center'><button class='btn' id='hoge4" + idx + "' type='button'>ボタン2</button><button class='btn' type='button'>ボタン3</button></td>"; tags += "<td rowspan=4><textarea name='hogeho[]' id='hoge5" + idx + "' class=form-control type=text></textarea></td>"; tags += "<td rowspan=4><textarea name='hogg[]' id='hoge6" + idx + "' class=form-control type=text></textarea></td></tr>"; tags += "<tr><td colspan=2><input type=text class=form-control value=></td></tr>"; tags += "<tr><td colspan=2><input type=text class=form-control value=></td></tr>"; tags += "<tr><td colspan=2><input class='form-control' col-2 value=></td></tr>"; $('#testtable tbody').append(tags); }; $("#testtable_row_add").click(function(){ var idx = $("#testtable > tbody > tr").length; addRow(idx); });

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

yoshinavi
yoshinavi

2019/08/25 05:45

提示のコードでは、flexは効いています。 (<li>は横並びになっています) 提示以外のCSSの影響が考えられるので、デベロッパーツールで適用CSSを確認されると良いかと思います。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。