Question

我在这里遇到一个问题，当我单击“复制行”并且想要获取每个项目的剩余数量时，结果不准确。

所以我们只说项目鼠标有100个数量，我输入了50个新数量。所以剩下的应该是50个。当我复制项目鼠标并输入40个时，现在剩下的是10个。其他项目。这应该是预期的输出。

当前状况

$('.qty').on("keyup", function() {

        var id = $(this).data('id');
      var value = $(this).val();
      var sum = 0;
      $("#table_name .qty").filter(function(){ 
        if ($(this).data("id") == id){
          sum += parseFloat(value);
        }
      });
      console.log(sum);
      $('.remaining').val(sum);

  });

Answer 1

您的总体逻辑确实不清楚。这是一个可能有帮助的示例。

$(function() {
  function refreshIndex($t) {
    $('tbody tr', $t).each(function(i, el) {
      var c = i + 1;
      var select = $(this).find('td:eq(0)').text(c);
    });
  }

  function copyRow(e) {
    var self = $(e.target);
    var row = self.closest("tr");
    row.clone().appendTo(self.closest("tbody"));
    refreshIndex($("#table_name"));
  }

  function updateItem(e) {
    var self = $(e.target);
    var row = self.closest("tr");
    var p = parseInt(self.val());
    var q = parseInt(row.find("td:eq(2) input").val());
    $('.remaining', row).val(q - p);
  }

  $("#table_name tbody").on("keyup", '.price', updateItem);
  $("#table_name tbody").on('click', '.copy', copyRow);

});

#table_name tr td input {
  width: 4em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_name">
  <thead>
    <tr>
      <th>No</th>
      <th>Item</th>
      <th>Total</th>
      <th>Qnty</th>
      <th>Action</th>
      <th>Remaing</th>
    </tr>
  </thead>
  <tbody>
    <tr class="trs" id="tr-1">
      <td>1</td>
      <td>Mouse</td>
      <td><input type="text" value="100" readonly></td>
      <td><input type="text" class="price" data-id="79"></td>
      <td><button class="copy" id="copy-1">Copy</button></td>
      <td><input type="text" class="remaining"></td>
    </tr>
    <tr class="trs" id="tr-2">
      <td>2</td>
      <td>Keyboard</td>
      <td><input type="text" value="20" readonly></td>
      <td><input type="text" class="price" data-id="80"></td>
      <td><button class="copy" id="copy-2">Copy</button></td>
      <td><input type="text" class="remaining"></td>
    </tr>
    <tr class="trs" id="tr-3">
      <td>3</td>
      <td>Monitor</td>
      <td><input type="text" value="50" readonly></td>
      <td><input type="text" class="price" data-id="81"></td>
      <td><button class="copy" id="copy-3">Copy</button></td>
      <td><input type="text" class="remaining"></td>
    </tr>
  </tbody>
</table>

当我在价格下输入40时，60出现为数量与输入金额之间的差。

单击“复制”后，将添加新行，并且已经由于使用.on()而将功能绑定到该行。

希望有帮助。

Answer 2

基本上，您可以使用data-id属性来定位实际要更新的行。

var clone_controll = function(num) {
  //Needed to mod this so add rows have the event handler
  $('#table_name').on("keyup", ".qty", function() {
  
  		var id = $(this).data('id');
      var value = $(this).val();
      var sum = 0;
      
      
      //Filter is the wrong choice here - it is designed to filter objects
      /*$("#table_name .qty").filter(function(){ 
        if ($(this).data("id") == id){          
          //I think this logic is incorrect as well
          //You are only getting the value from the 
          //field you are typing in
          sum += parseFloat(value);
        }
      });*/
      
      /*Use a better selector with each()*/
      $("#table_name [data-id=" + id +"]").each(function(){
        //In this context "this" is the item iterated in "each"
        sum += parseFloat($(this).val());
        console.log(sum);
      });
      
      console.log("Final: " + sum);
      //Here is your problem, this updates All "remaining fields
      //$('.remaining').val(sum);
      
      //All rows contiaining this data id
      var relevantRows = $("[data-id=" + id + "]").closest("tr");
      //Update the "remaining fields in those rows
      $(relevantRows).find(".remaining").val(sum);
      
  });
}
clone_controll();

var $tableBody = $('#table_name').find("tbody");
clickEvent();
function clickEvent(){
  $tableBody.find('.copy').off('click').on('click',function() {
          $trLast = $(this).closest('tr'),
          $trNew = $trLast.clone();
          $trLast.after($trNew); 
          clickEvent();
          clone_controll();
  });
   function refresh_index(){
  	$('#table_name > tbody > tr').each(function (i) {
      i++;
      var select = $(this).find('td').eq(0).text(i);
    });
  }
  refresh_index();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table id="table_name">
  <thead>
    <tr>
      <th>No</th>
      <th>Item</th>
      <th>Qty</th>
      <th>Your Qty</th>
      <th>Action</th>
      <th>Remaing per item(not per row)</th>
    </tr>
  </thead>
  <tbody>
    <tr class="trs" id="tr-1">
      <td>1</td>
      <td>Mouse</td>
      <td><input type="text" value="100" readonly></td>
      <td><input type="text" class="qty" data-id="79"></td>
      <td><button class="copy" id="copy-1">Copy</button></td>
      <td><input type="text" class="remaining"></td>
    </tr>
    <tr class="trs" id="tr-2">
      <td>2</td>
      <td>Keyboard</td>
      <td><input type="text" value="20" readonly></td>
      <td><input type="text" class="qty" data-id="80"></td>
      <td><button class="copy" id="copy-2">Copy</button></td>
      <td><input type="text" class="remaining"></td>
    </tr>
    <tr class="trs" id="tr-3">
      <td>3</td>
      <td>Monitor</td>
      <td><input type="text" value="50" readonly></td>
      <td><input type="text" class="qty" data-id="81"></td>
      <td><button class="copy" id="copy-3">Copy</button></td>
      <td><input type="text" class="remaining"></td>
    </tr>
  </tbody>
</table>

您的逻辑还很不清楚，但是希望这可以使您朝着正确的方向前进。

如何使用javascript获取每个项目的剩余数量

2 个答案: