Question

Goodday，我正试图通过textinput获得总数和格式。首先请检查我的脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

	<tr>
		<td>No</td>
		<td>Item</td>
		<td>Qty</td>
		<td>est</td>
		<td>tax</td>
		<td>Total</td>
		<td>GrandTotal</td>
	</tr>

	<tr>
		<td>No</td>
		<td>ITEM 1</td>
		<td>2</td>
		<td><input type="text" class="est"></td>
		<td><input type="text" class="tax"></td>
		<td><input type="text" readonly class="total"></td>
		<td><input type="text" readonly class="grandtotal"></td>
    </tr>

		<tr>
		<td>No</td>
	<td>ITEM 1</td>
		<td>2</td>
		<td><input type="text" class="est"></td>
		<td><input type="text" class="tax"></td>
		<td><input type="text" readonly class="total"></td>
		<td><input type="text" readonly class="grandtotal"></td>
	</tr>

</table>

我可以看到，有.total和.grandtotal。我想用这个

来搞清楚

total = .est * .qty
grandtotal = .total * .tax

所以，我想改变两个领域.est＆amp; .tax。

也许我能做到这一点

$(document).on("change",".tax",function(){
           //Code
        });

和

 $(document).on("change",".tax",function(){
           //Code
        });

但这需要时间，所以我试图采用这种方式

   $(document).on("change",".tax, .est",function(){
       //I don't know to get value of .tax or .est only
    });

如何获得总数和总计？

Answer 1

运行并查看结果

$('tr').each(function() {
  var qty = $($(this).children()[2]).text(),
    $tax = $(this).find(".tax"),
    $est = $(this).find(".est"),
    $total = $(this).find(".total"),
    $grandtotal = $(this).find(".grandtotal")

  function onChange() {
    var t = $est.val() * qty
    var gt = $tax.val() * t
    $total.val(t)
    $grandtotal.val(gt)
  }

  $tax.change(onChange)
  $est.change(onChange)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

  <tr>
    <td>No</td>
    <td>Item</td>
    <td>Qty</td>
    <td>est</td>
    <td>tax</td>
    <td>Total</td>
    <td>GrandTotal</td>
  </tr>

  <tr>
    <td>No</td>
    <td>ITEM 1</td>
    <td>2</td>
    <td><input type="text" class="est"></td>
    <td><input type="text" class="tax"></td>
    <td><input type="text" readonly class="total"></td>
    <td><input type="text" readonly class="grandtotal"></td>
  </tr>

  <tr>
    <td>No</td>
    <td>ITEM 1</td>
    <td>2</td>
    <td><input type="text" class="est"></td>
    <td><input type="text" class="tax"></td>
    <td><input type="text" readonly class="total"></td>
    <td><input type="text" readonly class="grandtotal"></td>
  </tr>

</table>

Answer 2

我希望这个帮助

$(function() {
  var resultTax = 0, resultEst = 0, total = 0;
  
  $(".tax").change( function() {
      $(".tax").each(function() { 
         resultTax += parseFloat($(this).val())
      });
      
      $('.resultTax').text(resultTax);
      $('.total').text($('.resultEst').text() + $('.resultTax').text());
  });
  
  $(".est").change( function() {
      $(".est").each(function() { 
         resultEst += parseFloat($(this).val())
      });
      
      $('.resultEst').text(resultEst);
      $('.total').text(parseFloat($('.resultEst').text()) + parseFloat($('.resultTax').text()));
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Tax <input type="text" class="tax" value="1"> 
Tax <input type="text" class="tax" value="2"><br>
Est <input type="text" class="est" value="3">
Est <input type="text" class="est" value="4"><br><br>
resultTax : <span class="resultTax"></span><br>
resultEst : <span class="resultEst"></span><br>
Total Tax + Est : <span class="total"></span>

从多个班级中获取总数

2 个答案: