动态相乘不同id的表行输入值

jQuery- Dynamically multiply input values of table rows with different id

本文关键字：输入 id 动态      更新时间：2023-09-26

使用下面的代码动态添加表行。为输入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

尝试使用像

这样的选择器开头
$(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>

相关文章：