时间戳

首页 > 解决方案 > 在 JavaScript 中添加更多按钮不起作用

javascript - 在 JavaScript 中添加更多按钮不起作用

问题描述

我正在尝试使用 JavaScript 在我的 django 模板中添加行，但它没有像预期的那样工作：

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) {
                                    var idData= id;
                                    var splitV= String(idData).split('-');
                                    var fData= splitV[0];
                                    var tData= splitV[2];
                                    return fData+ "-" +index + "-" + tData
                                },
                                'name': function (_, 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) {
                        var idData= id;
                        var splitV= String(idData).split('-');
                        var fData= splitV[0];
                        var tData= splitV[2];
                        return fData+ "-" +i + "-" + tData
                    },
                    'name': function (_, 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>

上面的代码创建了一个包含三个字段的表单，即player name，highest score和age一个add more按钮

但据此，它应该创建以下内容：

<!-- First row of the table -->

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

<!-- Second row of the table -->

<tr>
  <td><input type="text" name="form-1-name" id="id_form-1-name" /></td>
  <td>
    <input type="number" name="form-1-quantity" id="id_form-1-quantity" />
  </td>
  <td><input type="number" name="form-1-price" id="id_form-1-price" /></td>
  <td>
    <input
      id="remove_button"
      type="button"
      name="remove_button1"
      value=" Remove "
      class="tr_clone_add btn data_input"
    />
  </td>
</tr>

<!-- more inline formset are going to rendered here -->

但是当我在表单中创建另一行时，它会创建另一行具有相同的name和id。

看：

<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-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="remove_button-1-undefined" type="button" name="name_remove1-1-undefined" value="Remove" class="tr_clone_add btn data_input"> </td>

                </tr></tbody>

为什么它不添加更新的行name和id？

更新：

模型.py

class Player(models.Model):
    pname = models.CharField(max_length=50)
    hscore = models.IntegerField()
    age = models.IntegerField()
    def __str__(self):
       return self.pname

class Team(models.Model):
    tname = models.CharField(max_length=100)
    player= models.ManyToManyField(Player)
    def __str__(self):
        return self.tname

视图.py

def post(request):
   if request.POST:
        form = TeamForm(request.POST)
        print("form", form)
        form.player_instances = PlayerFormset(request.POST)
        if form.is_valid():
            team= Team()
            team.tname= form.cleaned_data['tname']
            team.save()

        if form.player_instances.cleaned_data is not None:
            for item in form.player_instances.cleaned_data:
                player = Player()
                player.pname= item['pname']
                player.hscore= item['hscore']
                player.age= item['age']
                player.save()
                team.player.add(player)
            team.save()

   else:
        form = TeamForm()
        return render(request, 'packsapp/employee/new.html', {'form':form})

表格.py

class PlayerForm(forms.Form):
    pname = forms.CharField()
    hscore= forms.IntegerField()
    age = forms.IntegerField()

PlayerFormset= formset_factory(PlayerForm)

class TeamForm(forms.Form):
   tname= forms.CharField()
   player= PlayerFormset()

标签： javascriptjquerydjangodjango-templates

解决方案

推荐阅读