jQuery-动态地将具有不同id的表行的输入值相乘

Question

使用以下代码动态添加表格行。输入 ID 附加用户 ID。

var selResId = jQuery('#grid').jqGrid('getGridParam', 'selarrrow');

    var j=1;
    for (var i=0, il=selResId.length; i < il; i++) {
        var name = jQuery('#grid').jqGrid('getCell', selResId[i], 'USER_NAME');

    $('#addr'+j).html("<td style='text-align:center;'>"+name+"</td><td><input id='hours_"+selResId[i]+"' value='80' type='text' readonly  /></td><td><input id='rate_"+selResId[i]+"' type='text' /></td><td><input name='markup_"+selResId[i]+"' type='text'/></td><td><input name='totalcost_"+selResId[i]+"' type='text' readonly></td>");
    $('#resource_table').append('<tr id="addr'+(j+1)+'"></tr>');
        j++;
        }
    }

HTML 生成

<tr id="addr1">
    <td>John Doe</td>
    <td><input type="text" readonly="" value="80" id="hours_10"></td>
    <td><input type="text" value="" id="rate_10"></td>
    <td><input type="text" value="" id="markup_10"></td>
    <td><input type="text" readonly="" value="" id="totalcost_10"></td>
</tr>

<tr id="addr2">
    <td>Foo User</td>
    <td><input type="text" readonly="" value="80" id="hours_11"></td>
    <td><input type="text" value="" id="rate_11"></td>
    <td><input type="text" value="" id="markup_11"></td>
    <td><input type="text" readonly="" value="" id="totalcost_11"></td>
</tr>

如何将hours, rate and markup 的输入值相乘，并使用以下公式将其显示在总成本输入下。该事件可能是keyup。

Initially, totalcost = hours * rate

Case 1: If markup (%) > 0, for eg: 10%, then markup_cost = (hours * rate * markup) / 100
totalcost = (hours * rate) + markup_cost

Case 2: If markup (%) < 0, for eg: -10%, then markup_cost = (hours * rate * markup) / 100
totalcost = (hours * rate) - markup_cost

Answer 1

尽量用starts with selector点赞，

$(function(){
   function setTotalCost(n){
       var h=Number($('#hours_'+n).val()),
           m=Number($('#markup_'+n).val()), // taking 0 if empty
           r=Number($('#rate_'+n).val());
       $('#totalcost_'+n).val(h*m*r);
   }

   $('[id^="rate_"]').on('keyup',function(){
       var n = this.id.replace('rate_','');// get the number
       setTotalCost(n);   
   });
   $('[id^="markup_"]').on('keyup',function(){
       var n = this.id.replace('markup_','');// get the number
       setTotalCost(n);   
   });
});

$(function(){
   function setTotalCost(n){
       var h=Number($('#hours_'+n).val()),
           m=Number($('#markup_'+n).val()), // taking 0 if empty
           r=Number($('#rate_'+n).val());
       $('#totalcost_'+n).val(h*m*r);
   }
   
   $('[id^="rate_"]').on('keyup',function(){
       var n = this.id.replace('rate_','');// get the number
       setTotalCost(n);   
   });
   $('[id^="markup_"]').on('keyup',function(){
       var n = this.id.replace('markup_','');// get the number
       setTotalCost(n);   
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="addr1">
    <td>John Doe</td>
    <td>
      <input type="text" readonly="" value="80" id="hours_10">
    </td>
    <td>
      <input type="text" value="" id="rate_10">
    </td>
    <td>
      <input type="text" value="" id="markup_10">
    </td>
    <td>
      <input type="text" readonly="" value="" id="totalcost_10">
    </td>
  </tr>

  <tr id="addr2">
    <td>Foo User</td>
    <td>
      <input type="text" readonly="" value="80" id="hours_11">
    </td>
    <td>
      <input type="text" value="" id="rate_11">
    </td>
    <td>
      <input type="text" value="" id="markup_11">
    </td>
    <td>
      <input type="text" readonly="" value="" id="totalcost_11">
    </td>
  </tr>
</table>