时间戳

首页 > 解决方案 > 如何获取每行动态添加的 3 行中的最小值总和

javascript - 如何获取每行动态添加的 3 行中的最小值总和

问题描述

以下代码将获得前 3 列中输入的最小值，它运行良好。但是在添加行（添加行）之后，我无法从接下来的 3 列中获得最小值。另外，我想从用户添加的列中获取所有 3 个最低值的总和。在这方面需要您的帮助。

$(document).ready(function() {
  var i = 1;
  $("#Add_BDSP").click(function() {
    $('#BDSP' + i).html("<td><input type='text' name='QuotedAmount1[" + i + "]' placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount2[" + i + "]'placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount3[" + i + "]' placeholder='Quoted Amount' class='form-control'/></td>");

    $('#Tab_BDSP').append('<tr id="BDSP' + (i + 1) + '"></tr>');
    i++;
  });
  $("#Delete_BDSP").click(function() {
    if (i > 1) {
      $("#BDSP" + (i - 1)).html('');
      i--;
    }
  });

});

var input = $('[name="QuotedAmount1[0]"],[name="QuotedAmount2[0]"],[name="QuotedAmount3[0]"]'),

  QuotedAmount1 = $('[name="QuotedAmount1[0]"]'),
  QuotedAmount2 = $('[name="QuotedAmount2[0]"]'),
  QuotedAmount3 = $('[name="QuotedAmount3[0]"]'),

  MulRes = $('[name="ServiceTotalCost"]');


input.change(function() {
  var Qoute1 = (isNaN(parseInt(QuotedAmount1.val()))) ? 0 : parseInt(QuotedAmount1.val());
  var Qoute2 = (isNaN(parseInt(QuotedAmount2.val()))) ? 0 : parseInt(QuotedAmount2.val());
  var Qoute3 = (isNaN(parseInt(QuotedAmount3.val()))) ? 0 : parseInt(QuotedAmount3.val());



  MulRes.val(Math.min(Qoute1, Qoute2, Qoute3));

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-float">
  <table class="table table-bordered table-hover" id="Tab_BDSP">
    <thead>
      <tr>
        <td>Amount</td>

      </tr>
    </thead>
    <tbody>
      <tr id='BDSP0'>


        <td>
          <input type="text" name='QuotedAmount1[0]' placeholder='Quoted Amount' class="form-control" required />
          <input type="text" name='QuotedAmount2[0]' placeholder='Quoted Amount' class="form-control" required />
          <input type="text" name='QuotedAmount3[0]' placeholder='Quoted Amount' class="form-control" required />
        </td>

      </tr>

      <tr id='BDSP1'></tr>
    </tbody>
  </table>
</div>
<a id="Add_BDSP" class="btn btn-default pull-left">Add Row</a><a id='Delete_BDSP' class="pull-right btn btn-default">Delete Row</a>
</div>

<div class="col-md-4">

  <div class="input-group form-group">
    <span class="input-group-addon">
                                                    <i class="material-icons">business_center</i>
                                                </span>
    <div class="form-line">
      <input type="number" class="form-control" name="ServiceTotalCost" id="ServiceTotalCost" required>
    </div>
  </div>
</div>

标签： javascriptjqueryhtmlajax

解决方案

但是在添加行（添加行）之后，我无法从接下来的 3 列中获得最小值

你的主要问题是：

QuotedAmount1 = $('[name="QuotedAmount1[0]"]'),
QuotedAmount2 = $('[name="QuotedAmount2[0]"]'),
QuotedAmount3 = $('[name="QuotedAmount3[0]"]'),

因为您只是选择QuotedAmount1[0]to QuotedAmount3[0]，在追加rownew inputhas QuotedAmount1[1].. 之后，您还使用change了 and 对于新行，您需要change与document选择器一起使用才能获得 live change。你应该把你的变量移到change事件中。重要的是，您应该选择不带 的输入name，这是工作片段：

$(document).ready(function() {
  var i = 1;
  $("#Add_BDSP").click(function() {
    $('#BDSP' + i).html("<td><input type='text' name='QuotedAmount1[" + i + "]' placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount2[" + i + "]'placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount3[" + i + "]' placeholder='Quoted Amount' class='form-control'/></td>");

    $('#Tab_BDSP').append('<tr id="BDSP' + (i + 1) + '"></tr>');
    i++;
  });
  $("#Delete_BDSP").click(function() {
    if (i > 1) {
      $("#BDSP" + (i - 1)).html('');
      i--;
    }
  });

});



$(document).on('change', '#Tab_BDSP tbody tr td input[type="text"]', function() {
  let result = 0;
  var MulRes = $('input#ServiceTotalCost');

  var QuotedAmount1 = $(this).parent().find('input[type="text"]').eq(0),
    QuotedAmount2 = $(this).parent().find('input[type="text"]').eq(1),
    QuotedAmount3 = $(this).parent().find('input[type="text"]').eq(2);

  var Qoute1 = (isNaN(parseInt(QuotedAmount1.val()))) ? 0 : parseInt(QuotedAmount1.val()),
    Qoute2 = (isNaN(parseInt(QuotedAmount2.val()))) ? 0 : parseInt(QuotedAmount2.val()),
    Qoute3 = (isNaN(parseInt(QuotedAmount3.val()))) ? 0 : parseInt(QuotedAmount3.val());

  var min = Math.min(Qoute1, Qoute2, Qoute3);
  $(this).parent().attr('data-lowest', min)


  $('#Tab_BDSP tbody tr td').each(function() {
    result += +$(this).attr('data-lowest')
  });

  MulRes.val(result)
});
Thank you for kind response,
the code is running perfect,
but the issue is if i change the value in additional rows,
it adds the lowest into the sum,
e.g. 1st row have 300000 400000 500000 and second row have 600000 700000 800000 The total sum will be 900000 which is perfect. but if i change the value from 600000 to 200000 it should shows 700000 but it gives value of 1100000. Your kind help is needed to rectify this issue in the given code. – ADIL I.T 8 mins ago
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-float">
  <table class="table table-bordered table-hover" id="Tab_BDSP">
    <thead>
      <tr>
        <td>Amount</td>

      </tr>
    </thead>
    <tbody>
      <tr id='BDSP0'>


        <td>
          <input type="text" name='QuotedAmount1[0]' placeholder='Quoted Amount' class="form-control" required />
          <input type="text" name='QuotedAmount2[0]' placeholder='Quoted Amount' class="form-control" required />
          <input type="text" name='QuotedAmount3[0]' placeholder='Quoted Amount' class="form-control" required />
        </td>

      </tr>

      <tr id='BDSP1'></tr>
    </tbody>
  </table>
</div>
<a id="Add_BDSP" class="btn btn-default pull-left">Add Row</a><a id='Delete_BDSP' class="pull-right btn btn-default">Delete Row</a>
</div>

<div class="col-md-4">

  <div class="input-group form-group">
    <span class="input-group-addon">
                                                    <i class="material-icons">business_center</i>
                                                </span>
    <div class="form-line">
      <input type="number" class="form-control" name="ServiceTotalCost" id="ServiceTotalCost" required>
    </div>
  </div>
</div>

我还想从用户添加的列中获取所有 3 个最低值的总和

对于获取sum，您需要获取min旧的最低值

推荐阅读