如何在我的动态表单中增加属性 "for"？

Question

我是编程新手，所以如果您能帮助我编写代码，我将不胜感激。在此之前，我通过参考 link :

设法解决了我的问题

前一行不是 computing/updating 来自使用 jquery 的附加行

但是我必须将该代码与此结合起来：

function cloneMore(selector, prefix) {
    var newElement = $(selector).clone(true);
    var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
    newElement.find(':input:not([type=button]):not([type=submit]):not([type=reset])').each(function() {
         var name = $(this).attr('name').replace('-' + (total-1) + '-', '-' + total + '-');
         var id = 'id_' + name;
         $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
    });
    total++;
    $('#id_' + prefix + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
    fullrowname = selector.substring(0,selector.length - 4) + 'not(:last)'
    var conditionRow = $(fullrowname);
    conditionRow.find('.btn.add-form-row')
    .removeClass('btn-success').addClass('btn-danger')
    .removeClass('add-form-row').addClass('remove-form-row')
    .html('<span class="fas fa-minus" aria-hidden="true"></span>');
    return false;
}

$("input.quantity,input.price").on('change', function() {
    Total($(this).attr("for"));
});

每次单击添加按钮时，id 都会完美递增，但 for="0" 属性不会递增。因此我对动态输入的计算不起作用:(

你们能告诉我如何在上面的代码中增加 "for" 属性吗？

Answer 1

您使用的方法和您之前得到的答案是有缺陷的。在运行时在动态内容中生成的增量 id 属性是一种反模式，IMO 永远不要使用它。代码很快变得无法维护、冗长、混乱。

更好的方法是对按行为分组的元素使用 common 类。然后您可以对所有这些元素使用一个委托事件处理程序。在这些事件处理程序中，您可以使用 DOM 遍历方法将元素相互关联并与它们交互。

此外，你不应该在 JS 逻辑中放置那么多 HTML 代码。理想情况下，应该有 none。要解决此问题，您可以改为 clone() 现有 DOM 元素并将它们附加到新位置以创建新行。

最后，请注意，当发送 AJAX 请求时，您应该挂钩 form 的 submit 事件，而不是提交按钮的 click。

综上所述，试试这个：

jQuery($ => {
  let $table = $('#articles');

  $table.on('input', '.quantity, .price', function() {
    let $row = $(this).closest('tr');    
    let qty = $row.find('.quantity').val();
    var price = $row.find('.price').val();
    var total = (qty * price).toFixed(2);
    $row.find('.total').val(total);  
  })

  $table.on('click', '.btn-remove', function() {
    if ($table.find('tr').length > 1) // prevent deletion of all rows
      $(this).closest('tr').remove();
  })
 
  $table.on('click', '.btn-add', function() {
    let $clone = $table.find('tr:first').clone().appendTo($table);
    $clone.find('.quantity, .price').val('0');
    $clone.find('.total').val('');
  });

  $('#add_name').on('submit', function(e) {
    e.preventDefault();
    let $form = $(this);
    $.ajax({
      url: "wwwdb.php",
      method: "POST",
      data: $form.serialize(),
      success: function(data) {
        $form[0].reset();
      }
    });
  });
});

table tr:first-of-type td:last-of-type button {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <br />
  <br />
  <div class="form-group">
    <form name="add_name" id="add_name">
      <div class="table-responsive">
        <table class="table table-bordered" id="articles">
          <tr class="rrjeshta">
            <td><input value="0" type="number" name="quantity[]" placeholder="quantity" class="form-control name_list quantity" /></td>
            <td><input value="0" type="number" name="price[]" placeholder="price" class="form-control name_list price" /></td>
            <td><input type="number" name="total[]" placeholder="total" class="form-control name_list total" readonly /></td>
            <td><button type="button" name="add" class="btn btn-success btn-add">Add new</button></td>
            <td><button type="button" name="remove" class="btn btn-danger btn-remove">X</button></td>
          </tr>
        </table>
        <input type="submit" class="btn btn-info" value="Submit" />
      </div>
    </form>
  </div>
</div>

如何在我的动态表单中增加属性 "for"？

How to increment attribute "for" in my dynamic form?

jquery

django

ajax

formset