javascript - 获取多个类别 onchange 的总计

Question

大家好，我正在尝试从 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 和 .tax 中进行 onchange 。

也许我能做到

$(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>