Fatal编程技术网
  • javascript/
  • Javascript clone（）生成具有相同id和名称的动态行

Javascript clone（）生成具有相同id和名称的动态行

javascript jquery

Javascript clone（）生成具有相同id和名称的动态行,javascript,jquery,Javascript,Jquery,我在django模板中使用JavaScript动态创建行，但当我单击add row按钮时，第一个会以相同的名称和id复制，因此当我提交数据时，它会被覆盖 以下是HTML： <html> <head> <title>gffdfdf</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="s

我在django模板中使用JavaScript动态创建行，但当我单击add row按钮时，第一个
会以相同的名称和id复制，因此当我提交数据时，它会被覆盖

以下是HTML：

<html>
<head>

    <title>gffdfdf</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="/static/jquery.formset.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container">

    <form id="myForm" action="" method="post" class="">
        {% csrf_token %}
        <h2> Team</h2>
        {% for field in form %}
        {{ field.errors }}
        {{ field.label_tag }} : {{ field }}
        {% endfor %}
        {{ form.player.management_form }}

        <h3> Product Instance(s)</h3>
        <table id="table-product" class="table">
            <thead>
            <tr>
                <th>player name</th>
                <th>highest score</th>
                <th>age</th>
            </tr>

            </thead>
            {% for player in form.player %}
            <tbody class="player-instances">

            <tr>
                <td>{{ player.pname }}</td>
                <td>{{ player.hscore }}</td>
                <td>{{ player.age }}</td>
                <td><input id="input_add" type="button" name="add" value=" Add More "
                           class="tr_clone_add btn data_input"></td>

            </tr>

            </tbody>
            {% endfor %}
        </table>
        <button type="submit" class="btn btn-primary">save</button>

    </form>
</div>

<script>
    var i = 1;
    $("#input_add").click(function () {
        $("tbody tr:first").clone().find(".data_input").each(function () {
            if ($(this).attr('class') == 'tr_clone_add btn data_input') {
                $(this).attr({
                    'id': function (_, id) {
                        return "remove_button"
                    },
                    'name': function (_, name) {
                        return "name_remove" + i
                    },
                    'value': 'Remove'
                }).on("click", function () {
                    var a = $(this).parent();
                    var b = a.parent();
                    i = i - 1
                    $('#id_form-TOTAL_FORMS').val(i);
                    b.remove();

                    $('.player-instances tr').each(function (index, value) {
                        $(this).find('.data_input').each(function () {
                            $(this).attr({
                                'id': function (_, id) {
                                    console.log("id", id)
                                    var idData = id;
                                    var splitV = String(idData).split('-');
                                    var fData = splitV[0];
                                    var tData = splitV[2];
                                    return fData + "-" + index + "-" + tData
                                },
                                'name': function (_, name) {
                                    console.log("name", name)
                                    var nameData = name;
                                    var splitV = String(nameData).split('-');
                                    var fData = splitV[0];
                                    var tData = splitV[2];
                                    return fData + "-" + index + "-" + tData
                                }
                            });
                        })
                    })
                })
            } else {
                $(this).attr({
                    'id': function (_, id) {
                        console.log("id", id)

                        var idData = id;
                        var splitV = String(idData).split('-');
                        var fData = splitV[0];
                        var tData = splitV[2];
                        return fData + "-" + i + "-" + tData
                    },
                    'name': function (_, name) {
                        console.log("name", name)

                        var nameData = name;
                        var splitV = String(nameData).split('-');
                        var fData = splitV[0];
                        var tData = splitV[2];
                        return fData + "-" + i + "-" + tData
                    }
                });

            }
        }).end().appendTo("tbody");
        $('#id_form-TOTAL_FORMS').val(1 + i);
        i++;

    });
</script>

</body>
</html>
鉴于预期产出如下：

<tbody class="player-instances">

            <tr>
                <td><input type="text" name="form-0-pname" id="id_form-0-pname"></td>
                <td><input type="number" name="form-0-hscore" id="id_form-0-hscore"></td>
                <td><input type="number" name="form-0-age" id="id_form-0-age"></td>
                <td><input id="input_add-0-undefined" type="button" name="add-0-undefined" value=" Add More " class="tr_clone_add btn data_input"></td>

            </tr>

            <tr>
                <td><input type="text" name="form-1-pname" id="id_form-1-pname"></td>
                <td><input type="number" name="form-1-hscore" id="id_form-1-hscore"></td>
                <td><input type="number" name="form-1-age" id="id_form-1-age"></td>
                <td><input id="remove_button" type="button" name="name_remove1" value="Remove" class="tr_clone_add btn data_input"></td>

            </tr></tbody>
我该怎么做才能在添加新行时获得一个新的
id
和
name
？

您可以通过循环查看添加到表中的最后一行，然后使用新的递增
I
值更新所有
id
和
name
属性，如：

$("tbody tr:last :input").each(function() {
   $(this).attr({
      'id': function(_, id) {
        return id.replace(/\d/g, i)
      },
      'name': function(_, name) {
        return name.replace(/\d/g, i)
      }
   })
})
工作演示：

var i=1；
$（“#输入_添加”）。单击（函数（）{
$（“tbody tr:first”）.clone（）.find（“.data\u input”）.each（function（）{
if（$（this.attr（'class'）='tr\u clone\u add btn data\u input'）{
$（this.attr）({
“id”：函数（\ux，id）{
返回“移除按钮”+i
},
“名称”：函数（\ux，名称）{
返回“name_remove”+i
},
“值”：“删除”
})
}
}).end（）.appendTo（“tbody”）；
$（“tbody tr:last:input”）。每个（函数（）{
$（this.attr）({
“id”：函数（\ux，id）{
返回id.replace（/\d/g，i）
},
“名称”：函数（\ux，名称）{
返回名称。替换（/\d/g，i）
},
})
})
//$（'id_form-TOTAL_FORMS'）.val（1+i）；
i++；
});

您可以通过循环查看添加到表中的最后一行，然后使用新的递增
i
值更新所有
id
&
name
属性来完成此操作，如：


$("tbody tr:last :input").each(function() {
   $(this).attr({
      'id': function(_, id) {
        return id.replace(/\d/g, i)
      },
      'name': function(_, name) {
        return name.replace(/\d/g, i)
      }
   })
})


工作演示：



var i=1；
$（“#输入_添加”）。单击（函数（）{
$（“tbody tr:first”）.clone（）.find（“.data\u input”）.each（function（）{
if（$（this.attr（'class'）='tr\u clone\u add btn data\u input'）{
$（this.attr）({
“id”：函数（\ux，id）{
返回“移除按钮”+i
},
“名称”：函数（\ux，名称）{
返回“name_remove”+i
},
“值”：“删除”
})
}
}).end（）.appendTo（“tbody”）；
$（“tbody tr:last:input”）。每个（函数（）{
$（this.attr）({
“id”：函数（\ux，id）{
返回id.replace（/\d/g，i）
},
“名称”：函数（\ux，名称）{
返回名称。替换（/\d/g，i）
},
})
})
//$（'id_form-TOTAL_FORMS'）.val（1+i）；
i++；
});



在我的代码中，我在
$（'#id_form-TOTAL_FORMS'）.val（1+I）下面添加了您的代码并且它工作得非常完美。。但是你能解释一下为什么它不能在早期工作吗？它不能在早期工作，因为你在使用
$（“tbody tr:first”）.clone（）时只浏览了最后一列。查找（“.data_input”）
你需要在行中循环每个输入，然后更新每个输入的属性。在我的代码中，我在
下面添加了你的代码$（“#id_form-TOTAL_FORMS”）.val（1+i）
而且它工作得很好。但是您能解释一下为什么它不能更早地工作吗？它不能更早地工作是因为您在使用
$（“tbody tr:first”）.clone（）时只浏览了最后一列。find（“.data_input”）
您需要遍历行中的每个输入，然后更新每个输入的属性。