使用 jQuery 输入添加列（追加）时获取总数答案

【问题标题】：Get total as you type with added column (append) using jQuery使用 jQuery 输入添加列（追加）时获取总数
【发布时间】：2019-06-12 09:48:00
【问题描述】：

<button type="button" class="btn btn-default" id="add_supplier">Add Supplier</button>
<table class="table table-bordered" id="supplier_table">
    <thead>
      <tr id="first-header">
        <th></th>
        <th></th>
        <th colspan="2">Supplier</th>
      </tr>
      <tr id="second-header">
        <th>Item</th>
        <th>Qty</th>
        <th>Price</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" class="form-control" id="usr" value="Mouse" readonly=""></td>
        <td><input type="text" class="form-control" id="usr" value="10" readonly=""></td>
        <td><input type="text" class="form-control" id="price"></td>
        <td><input type="text" class="form-control" id="total"></td>
      </tr>
      <tr>
        <td><input type="text" class="form-control" id="usr" value="Keyboard" readonly=""></td>
        <td><input type="text" class="form-control" id="usr" value="20" readonly=""></td>
        <td><input type="text" class="form-control" id="price"></td>
        <td><input type="text" class="form-control" id="total"></td>
      </tr>
      <tr>
        <td><input type="text" class="form-control" id="usr" value="Monitor" readonly=""></td>
        <td><input type="text" class="form-control" id="usr" value="30" readonly=""></td>
        <td><input type="text" class="form-control" id="price"></td>
        <td><input type="text" class="form-control" id="total"></td>
      </tr>
    </tbody>
  </table>

这是添加列（追加）

$(function() {

$('#add_supplier').click(function() {

  $('#supplier_table > thead > tr#first-header').append(
    '<th colspan="2">Supplier</th>'
  );

  $('#supplier_table > thead > tr#second-header').append(
    '<th>Price</th>' +
    '<th>Total</th>'
  );

  $('#supplier_table > tbody > tr').append(
    '<td><input type="text" class="form-control" id="price"></td>' +
    '<td><input type="text" class="form-control" id="total"></td>'
  );

});

});

演示链接：JSFIDDLE

【问题讨论】：

请用内嵌图片发布描述性问题。
请分享您的代码
请查看更新图片。这就是我试图实现的第二个价格列来自附加。第一个价格列有效。但在第二列价格没有。
最后的评论应该是对问题的编辑。
请分享您的代码，以便我们看到问题。

标签： javascript jquery

【解决方案1】：

如果新添加的列 ID 缺少 ID 号，则会出现问题。如果你看 id，它只显示“price-”，它可能应该是“price-2-1”，因为原始的是“price-1”，原始的应该是“price-1” -1-1”。

除此之外，问题是您还需要将事件侦听器添加到新创建的项目中：

$('#add_supplier').click(function(){

  $('#supplier_table > thead > tr#first-header').append(
      '<th colspan="2">Supplier</th>'
  );

  $('#supplier_table > thead > tr#second-header').append(
      '<th>Price</th>'+
      '<th>Total</th>'
  );

  $('#supplier_table > tbody > tr').append(
      '<td><input type="text" class="form-control price" id="price-"></td>'+
      '<td><input type="text" class="form-control total" id="total-" readonly></td>'
  );



    $(".price").each(function () {
        $(this).keyup(function () {
            multInputs();
        });
    });

});

【讨论】：

【解决方案2】：

通过以下方法，您可以根据邻近度搜索字段，从而能够使用必要的参数进行计算。

$(function(){

    $('#add_supplier').click(function(){

      $('#supplier_table > thead > tr#first-header').append(
          '<th colspan="2">Supplier</th>'
      );

      $('#supplier_table > thead > tr#second-header').append(
          '<th>Price</th>'+
          '<th>Total</th>'
      );

      $('#supplier_table > tbody > tr').append(
          '<td><input type="text" class="form-control price" id="price-"></td>'+
          '<td><input type="text" class="form-control total" id="total-" readonly></td>'
      );

    bindPrice();
    
    });
    
    bindPrice();
});

function bindPrice(){

    $('.price').off().on('keyup', function(){
      $total = $(this).parents().eq(0).next().find('.total');
      $qty = $(this).parents().eq(1).find('.qty');
      $total.val($(this).val() * $qty.val() )
    });
   }

<html lang="en">

  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <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.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <style type="text/css">
    #supplier_table thead th,
    td {
      text-align: center;
    }

  </style>

  <body>

    <div class="container">
      <h2>Bordered Table</h2>
      <p>The .table-bordered class adds borders to a table:</p>
      <button type="button" class="btn btn-default" id="add_supplier">Add Supplier</button>
      <table class="table table-bordered" id="supplier_table">
        <thead>
          <tr id="first-header">
            <th></th>
            <th></th>
            <th colspan="2">Supplier</th>
          </tr>
          <tr id="second-header">
            <th>Item</th>
            <th>Qty</th>
            <th>Price</th>
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
          <tr class="tbody-tr">
            <td><input type="text" class="form-control" id="usr" value="Mouse" readonly=""></td>
            <td><input type="text" class="form-control qty" id="qrt-1" value="10" readonly=""></td>
            <td><input type="text" class="form-control price" id="price-1"></td>
            <td><input type="text" class="form-control total" id="total-1" readonly></td>
          </tr>
          <tr class="tbody-tr">
            <td><input type="text" class="form-control" id="usr" value="Keyboard" readonly=""></td>
            <td><input type="text" class="form-control qty" id="qty-3" value="20" readonly=""></td>
            <td><input type="text" class="form-control price" id="price-3"></td>
            <td><input type="text" class="form-control total" id="total-3" readonly></td>
          </tr>
          <tr class="tbody-tr">
            <td><input type="text" class="form-control" id="usr" value="Monitor" readonly=""></td>
            <td><input type="text" class="form-control qty" id="qty-5" value="30" readonly=""></td>
            <td><input type="text" class="form-control price" id="price-5"></td>
            <td><input type="text" class="form-control total" id="total-5" readonly></td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>

</html>

【讨论】：