🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

830閲覧

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

kinisinai

総合スコア28

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/10/25 15:10

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

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

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

HTML5

1 2<button id='testtable_row_add'>行追加</button> 3 4<table id='testtable'> 5<tbody></tbody> 6</table>

jQuery

1function addRow(idx){ 2345 var tags; 67 tags += "<tr> <td class=text-center rowspan='4'> <button type=button data-idx='" + idx + "' class='btn deleterowbtn'>ボタン0</button></td>"; 8 tags += "<td rowspan=4><input class='form-control bangou' type=text value=''></input></td>"; 9 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>"; 10 tags += "<td><input name='hogehogehoge[]' id='hoge3" + idx + "' class=form-control type=text></td>"; 11 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>"; 12 tags += "<td rowspan=4><textarea name='hogeho[]' id='hoge5" + idx + "' class=form-control type=text></textarea></td>"; 13 tags += "<td rowspan=4><textarea name='hogg[]' id='hoge6" + idx + "' class=form-control type=text></textarea></td></tr>"; 14 tags += "<tr><td colspan=2><input type=text class=form-control value=></td></tr>"; 15 tags += "<tr><td colspan=2><input type=text class=form-control value=></td></tr>"; 16 tags += "<tr><td colspan=2><input class='form-control' col-2 value=></td></tr>"; 1718 $('#testtable tbody').append(tags); 19}; 20 21 22$("#testtable_row_add").click(function(){ 23 2425 var idx = $("#testtable > tbody > tr").length; 26 addRow(idx); 27}); 28

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ゼロ幅スペースや最初の += が修正されているものとして

jQuery

1 $('#testtable tbody').append($(tags).find('.bangou').val(($('#testtable tbody .bangou').length + 1).toString()).end());

投稿2019/10/26 00:57

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kinisinai

2019/10/26 02:22

最初の+=がおかしいとはどういうことでしょうか?
kinisinai

2019/10/26 03:31

すみません。解決できました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問