Question

我想直率；我对Javascript / Jquery不满意。我正在学习:)我非常擅长PHP。

我有一张表，向用户显示一个单行项目，他们可以在其中输入信息。此表格是“变更单”。我很难理解我需要怎么做才能使“总计”和“价格”输入字段通过总计类别中的示例求和。我还需要在每个新行插入期间进行这种求和。

此页面将生成包含输入的行项目的模板PDF文档。

我的Javascript代码IVE是

    let count = 0;
    $('p input[type="button"]').click(function () {
        count += 1;
    })
    $('#myTable').on('click', 'input[type="button"]', function () {
        $(this).closest('tr').remove();
    })
    $('p input[type="button"]').click(function () {
        var varItem = 'item_' + count;
        var varCount = 'count_' + count;
        var varPrice = 'price_' + count;
        var varTotal = 'total_' + count;
        $('#myTable').append('' +
            '<tr>' +
                '<td>' +
                    '<input type="text" class="form-control" name="' + varItem + '"/>' +
                '</td>' +
                '<td>' +
                    '<input type="text" class="form-control" name="' + varCount + '"/>' +
                '</td>' +
                '<td>' +
                    '<input type="text" class="form-control" name="' + varPrice + '"/>' +
                '</td>' +
                '<td>' +
                    'Count * Price = Total' +
                '</td>' +
                '<td>' +
                    '<input type="button" class="btn btn-sm btn-danger" value="Delete" />' +
                '</td>' +
            '</tr>'
        )
    });

HTML

<table id="myTable" class="table table-hover table-striped width-full">
                                    <thead>
                                    <tr>
                                        <th>Item</th>
                                        <th>Count</th>
                                        <th>Price</th>
                                        <th>Total</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <input type="text" class="form-control" name="item_0" />
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" name="count_0" />
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" name="price_0" />
                                            </td>
                                            <td>
                                                Count * Price = Total
                                            </td>
                                            <td>
                                                <input type="button" class="btn btn-sm btn-danger" value="Delete" />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

Answer 1

我根据您的代码创建了此codepen

$(document).ready(function() {
  let count = 0;
  $('p input[type="button"]').click(function() {
    count += 1;
  })
  $('#myTable').on('click', 'input[type="button"]', function() {
    $(this).closest('tr').remove();
  })
  $('p input[type="button"]').click(function() {
    var varItem = 'item_' + count;
    var varCount = 'count_' + count;
    var varPrice = 'price_' + count;
    var varTotal = 'total_' + count;
    $('#myTable').append('' +
      '<tr>' +
      '<td>' +
      '<input type="text" class="form-control" name="' + varItem + '"/>' +
      '</td>' +
      '<td>' +
      '<input type="text" class="form-control quantity" name="' + varCount + '"/>' +
      '</td>' +
      '<td>' +
      '<input type="text" class="form-control price" name="' + varPrice + '"/>' +
      '</td>' +
      '<td class="' + varTotal + '">' +
      'Count * Price = Total' +
      '</td>' +
      '<td>' +
      '<input type="button" class="btn btn-sm btn-danger" value="Delete" />' +
      '</td>' +
      '</tr>'
    )
  });

  $(document).on("change", ".quantity", function() {
    $quantity = $(this);
    $index = $quantity.attr('name').split('_')[1]
    $price = $('input[name="price_' + $index + '"]').val()
    $('.total_' + $index).text($price ? $price * $quantity.val() : 0)
    // alert($price);  // jQuery 1.7+
  });

  $(document).on("change", ".price", function() {
    $price = $(this);
    $index = $price.attr('name').split('_')[1]
    $quantity = $('input[name="count_' + $index + '"]').val()
    $('.total_' + $index).text($quantity ? $quantity * $price.val() : 0)
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type='button' value='Add'></p>
<table id="myTable" class="table table-hover table-striped width-full">
  <thead>
    <tr>
      <th>Item</th>
      <th>Count</th>
      <th>Price</th>
      <th>Total</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

这个想法是，只要事件的值更改，就将事件绑定到quantity和price输入字段，然后在相应的行索引处更新总值。为了将更改事件绑定到动态添加的元素，请参考JQuery's live()帮助器。

然后您将看到购物车如下图所示

Answer 2

在价格输入中添加类别名称（已添加的priceInput）

<input type="text" class="form-control priceInput" name="' + varPrice + '"/>

然后找到与之和

sum = 0
$( ".printInput" ).each(function( index ) {
  sum+= Number($( this ).val())
});
console.log("The sum is : " + sum)

Answer 3

将40 40 {0: 20, 2: 40}事件应用于change和price输入。当两个值都存在时，将count的{{1}}字段更改为text的值。

total

price*count

用户输入时的Javascript / Jquery总和输入字段

3 个答案: