Q&A
> attrにて追加前に値を付与
具体的に、どのようなコードを書いたのですか？
前提・実現したいこと
jQueryのcloneにて行を追加しているのですが、nameに対して可変的な数値を付与したいです。
sample[]
hoge[]
mai[]
現状上記のnameに対して0が付与されていますがこちらの値をcloneするたびに1,2,3と増加するような動きになればよいと考えております。
※最後尾に追加の処理のみにこの機能を付与したい。
・サンプルソース
https://codepen.io/sougoukanri/pen/RwZYody
試したこと
attrにて追加前に値を付与
該当のソースコード
html5
1<!DOCTYPE html> 2<html lang="ja"> 3 4<body> 5 <div id="table"> 6 <table border=1> 7 <tr> 8 <th>チェック</th> 9 <th>表示</th> 10 <th>入力欄</th> 11 </tr> 12 <tr> 13 <td> 14 <select th:name="sample[0]"> 15 <option value="A">A</option> 16 <option value="B">B</option> 17 <option value="C">C</option> 18 </select> 19 </td> 20 <td th:name="hoge[0]">daad</td> 21 <td> 22 <input th:name="mai[0]" type="text"> 23 </td> 24 </tr> 25 </table> 26 </div> 27 <button id="ap-add">最後尾に追加</button> 28 <button id="pre-add">先頭に追加</button> 29 <button id="del">クリア</button> 30</body> 31 32</html>
js
1$(document).ready(function () { 2 var title = $("tr:first").clone(); 3 var input = $("tr:first").next().clone(); 4 5 $("#ap-add").click(function () { 6 $(input).clone().appendTo("table"); 7 }); 8 9 $("#pre-add").click(function () { 10 $("tr:first").remove(); 11 $(input).clone().prependTo("table"); 12 $(title).clone().prependTo("table"); 13 }); 14 15 $("#del").click(function () { 16 $("td").parent().remove(); 17 $(input).clone().appendTo("table"); 18 }); 19}); 20
補足情報（FW/ツールのバージョンなど）
jQuery,html,css,DB2
0から連番なら書かなくてもサーバーサイドではその番号で取得できるのでは
maisumakun ＞
ご返信どうもありがとうございます。
// クローン取得する
var clone = $(input).clone().appendTo("table");
// クローンのinputを取得する
var input = clone.children('input');
// 追加する前にnameを変更する
input.attr("name", $('input').length + 1);
// 追加する
clone.insertAfter($(this).parent());
のような感じです、初心者で手探りな為誤見当違いな記述ですが...
m.ts10806 >
回答ありがとうございます。
サーバーサイドでは考えていませんあくまでJsでの実装がメインとしたい為です。
あえて番号を明示的に振って何に使いたいかというのも確認の意図です。
※ただ、Thymeleaf使われてる時点でサーバーサイド関係ないとは思えず。本当に関係ないのでしたらhtmlのみの記述にしていただきたく
回答1件
0
ベストアンサー
javascript
1// 追加する前にnameを変更する 2input.attr("name", $('input').length + 1);
ここでhoge[1]のような文字列を生成して指定すればいいのではないでしょうか？
投稿2021/11/12 06:49
総合スコア146018
あなたの回答
tips
プレビュー
