Question

<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

Answer 1

一个问题，如果新添加的列ID缺少ID号。如果您查看ID，则它应该仅显示“ price-”，而其原始值应该是“ price-1”，而原始值应该是“ price-2-1”，而原始值应该类似于“ price-” -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();
        });
    });

});

Answer 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>

使用jQuery使用添加的列（附加）输入时获得总计

2 个答案: