複数の入力フィールドがあるグループをAddボタンで複製した際に、グループ内の入力フィールドには同じカウントを付与したいです。

###前提・実現したいこと
フォーム要素の内側で複数の入力フィールドがあるグループをAddボタンで複製した際に、グループ内の入力フィールドには同じカウントを付与したいです。

以上、ご確認の程、よろしくお願い申し上げます。
###発生している問題・エラーメッセージ
Addボタンをクリックした際に、グループ全ての番号が書き換わります。

###該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
</head>
</head>
<body>
    <div>
        <form name="multi" method="put" action="">
            <table id="tbl1">
                <tbody>
                <tr>
                    <td><input type="text" name="user_1"></td>
                    <td><input type="text" name="email_1"></td>
                    <td><span class="add">Add</span></td>
                </tr>
                </tbody>
            </table>
            <p>count：<input type="text" id="cnt" name="cnt" value="1">
        </form>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        var tbl = $("#tbl1");
        var row = tbl.find("tr:first-child").clone(true)
                .append("<td><span class='delete'>Delete</span></td>");

        tbl.on("click", "span.add", function(){
            tbl.find("tbody").append(row.clone(true));
            adjust();
        }).on("click", "span.delete", function(){
            $(this).parent().parent("tr").remove();
            adjust();
        });

        function adjust(){
            var inp = $("#tbl1 input");
            inp.each(function(i, e){
                $(e).attr("name", "user_" + (i+1));
                $(e).attr("name", "email_" + (i+1));
            });
            $("#cnt").attr("value", inp.length);
        }
    });
    </script>
</body>
</html>

yambejp

2017/03/06 02:16

プラス（+）ボタンが見当たらないようですが、具体的にはどこのことでしょうか？それとjQuery自体の読み込み部分を省略していますが、ここまで書いているなら書いたほうがよいのでは？

marshmallowy

2017/03/06 02:24

失礼いたしました。修正いたしましたので、ご確認の程、よろしくお願いします。

yambejp

2017/03/06 02:28

結果として、user_1→email_1、email_1→email_2、追加email_3、email_4となっているのをuser_1、email_1はそのままでuser_2、email_2が追加されればよいということでしょうか？そのさい、userとemaiは初期値が1で同じですが、異なる場合も想定したほうがよいのでしょうか？

yambejp

2017/03/06 02:30

また３行以上になった場合、途中の行を削除した場合、番号は1番から振り直しということでよいですか？

marshmallowy

2017/03/06 02:56

また３行以上になった場合、途中の行を削除した場合、番号は1番から振り直しということでよいですか？はい。グループが必ず2個とも限りませんので増やすたびにカウントが付与されるようにしたいです。よろしくお願いします。

行動規範の内容に同意します

回答2件

こんな感じでいかがでしょ。

name属性 については、user_1 -> user[0] のように配列形式にしています。きっとその方が使いやすいはず…。

単純に、tr の数をカウントすればいいということです。

clone() を使うと、<input type=text> に値を入力した後で、clone()すると値まで複製されるので、clone() は使わない形で。

html
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5	</head>
6</head>
7<body>
8    <div>
9        <form name="multi" method="put" action="">
10            <table id="tbl1">
11                <tbody>
12					<tr>
13						<td><input type="text" name="user[0]"></td>
14						<td><input type="text" name="email[0]"></td>
15						<td><span class="add">Add</span></td>
16					</tr>
17                </tbody>
18            </table>
19        </form>
20    </div>
21    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
22    <script type="text/javascript">
23		$(function () {
24			var tbl = $("#tbl1");
25
26			tbl.on("click", "span.add", function () {
27
28				var cnt = tbl.find('tr').length;
29
30				var tr = $('<tr>');
31
32				var td0 = $('<td>');
33				td0.appendTo(tr);
34				var input_user = $('<input>');
35				input_user.prop({
36					'type': 'text'
37					, 'name': 'user[' + cnt + ']'
38				}).appendTo(td0);
39
40				var td1 = $('<td>');
41				td1.appendTo(tr);
42				var input_email = $('<input>');
43				input_email.prop({
44					'type': 'text'
45					, 'name': 'email[' + cnt + ']'
46				}).appendTo(td1);
47
48				var td2 = $('<td>');
49				td2.appendTo(tr);
50				var span = $('<span>');
51				span.addClass('add').text('Add').appendTo(td2);
52
53				var td3 = $('<td>');
54				td3.appendTo(tr);
55				var span = $('<span>');
56				span.addClass('delete').text('Delete').appendTo(td3);
57
58				tbl.find('tbody').append(tr);
59
60			}).on("click", "span.delete", function () {
61				tbl.find('tbody tr:last').remove();
62			});
63		});
64    </script>
65</body>
66</html>

投稿2017/03/06 02:47

退会済みユーザー

総合スコア0

ベストアンサー

とりあえずこんなかんじでしょうか

javascript
1$(function() {
2  var tbl = $('#tbl1');
3  var row = tbl.find('tr:first-child').clone(true)
4    .append('<td><span class="delete">Delete</span></td>');
5  
6  tbl.on('click', 'span.add', function(){
7    tbl.find('tbody').append(row.clone(true));
8    adjust();
9  }).on('click', 'span.delete', function(){
10    $(this).parents('tr').remove();
11    adjust();
12  });
13  
14  function adjust(){
15    $('#tbl1 input[name^="user_"]').each(function(i){
16      var num=i+1;
17      $(this).attr('name','user_'+num);
18      $(this).parents('td').next().find('input[name^="email_"]').attr('name','email_'+num);
19    });
20    $("#cnt").val($('#tbl1 input[name^="user_"]').length);
21  }
22});
23

投稿2017/03/06 03:15

yambejp

総合スコア114769

marshmallowy

2017/03/06 05:21

ありがとうございます。お聞きしたいのですが、入力フィールドが追加された場合、単純に以下のようにスクリプトを追加したらよろしかったでしょうか？ $(this).parents('td').next().find('input[name^="age_"]').attr('name','age_'+num);

marshmallowy

2017/03/06 05:53

スクリプトをよく確認して、以下のコードで解決いたしました。ありがとうございます。 $(this).parents('td').next().find('input[name^="email_"]').attr('name','email_'+num); // 元々のコード $('td').next().find('input[name^="email_"]').attr('name','email_'+num); // 変更後のコード

行動規範の内容に同意します

あなたの回答