javascript中的级联onchange计算

Question

我有材料清单和每种材料的费率。当用户输入材料的数量时，onchange 事件会触发并将材料成本计算为费率*数量。这是我能够做到的。我也想要所有材料成本的总和。我可以通过在 onchange 中添加另一个 javascript 函数作为 onchange="mymultiply(100, 'rate_1','quantity_1');mysummation('cost_1','cost_2',...,'sum_cost')" 来做到这一点。但是如何级联呢？

我希望在数量_1/数量_2 等中的 onchange 更改只读值（cost_1/cost_2 等）时触发 javascript 函数。onchange 仅适用于用户输入。有没有解决办法。

所以示例表单看起来像这样。

<table>
<tr><th>material</th><th>rate</th><th>quantity</th><th>cost</th></tr>
<tr>
  <td>Material 1</td>
  <td><input type='text' id='rate_1' readonly='true' value='100' /></td>
  <td><input type='text' id='quantity_1' onchange="mymultiply('rate_1','quantity_1','cost_1');" /></td>
  <td><input type='text' id='cost_1' readonly='true' onchange="mysummation('cost_1','cost_2','cost_3','sum_cost');" /></td>
</tr>
<tr> Row 2 data</tr>
<tr> Row 3 data</tr>
</table>

<input type='text' id='sum_cost' readonly='true' />

Javascript 看起来像这样......

function mymultiply(rate, quantity, cost){
  document.getElementById(cost).value=document.getElementById(quantity).value*document.getElementById(rate).value;
}

function mysummation(cost_1, cost_2, cost_3, sum){
  document.getElementById(sum).value=document.getElementById(cost_1).value+document.getElementById(cost_2).value+document.getElementById(cost_3).value;
}

Answer 1

你可以试试吗

脚本

    <script>

    function mymultiply(quantity){
       var rate1=document.getElementById('rate_1').value;
       document.getElementById('cost_1').value= parseInt(quantity)*parseInt(rate1);
       document.getElementById('cost_2').value= parseInt(quantity)*200;
       document.getElementById('cost_3').value= parseInt(quantity)*300;
       document.getElementById('sum_cost').value= parseInt(document.getElementById('cost_1').value)+parseInt(document.getElementById('cost_2').value)+parseInt(document.getElementById('cost_3').value);
    }

    </script>

HTML

    <table>
    <tr><th>material</th><th>rate</th><th>quantity</th><th>cost1</th><th>cost2</th><th>cost3</th></tr>
    <tr>
      <td>Material 1</td>
      <td><input type='text' id='rate_1' readonly='true' value='100' /></td>
      <td><input type='text' id='quantity_1' onKeyUp="mymultiply(this.value);" /></td>
      <td><input type='text' id='cost_1' readonly='true' /></td>
      <td><input type='text' id='cost_2' readonly='true' /></td>
      <td><input type='text' id='cost_3' readonly='true' /></td>
    </tr>
    <tr> Row 2 data</tr>
    <tr> Row 3 data</tr>
    </table>

    Totla Value<input type='text' id='sum_cost' readonly='true' />

我想你想从另一个函数触发一个函数试试这个

$(selector).trigger("change"); 

或

当你调用它时

 function mymultiply(rate, quantity, cost){
   mysummation('100', '200', '300', '600');//call another function also
 }