减法后自动填充输入

时间:2018-03-26 03:28:28

标签: javascript jquery html arrays

嗨,我有这个带三个输入的简单代码

totalofservices,totalontarget& totalofftarget

我希望代码的流程像这样

一个。用户密钥总共服务

湾目标上的用户密钥总数(不应大于服务总数)

℃。完全关闭目标自动填满(服务总数 - totalontarget)

这是我到目前为止所尝试的目前无效的

https://jsfiddle.net/03oqrczh/4/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script>
$(document).ready(function() {
  $('.totalofservices').keyup(function() {
    var tr = $(this).closest('tr');
    tr.find(".totalontarget").val($(this).val());
    tr.find(".totalofftarget").val("0");
  });
});


 $('.totalontarget').keyup( getDiff);
function getDiff(){
    var num1=1*$('#totalofservices').val() || 0;
    var num2=1*$('#totalontarget').val() || 0;
    $('.total').val( num1-num2);

}
 </script>


<table>
  <tr>
    <td>Zone 1</td>
    <td><input style='text-align:center' class='form-control totalofservices' type='text' size='20'  name='totalofservices[]'>
    </td>
    <td><input style='text-align:center' class='totalontarget form-control' type='text' size='20'  name='totalontarget[]'></td>
    <td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20'  name='totalofftarget[]'></td>
  </tr>
  <tr>
    <td>Zone 2</td>
    <td><input style='text-align:center' class='totalofservices form-control' type='text' size='20' name='totalofservices[]'>
    </td>
    <td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
    <td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20' name='totalofftarget[]'></td>
  </tr>
  <tr>
    <td>Zone 3</td>
    <td><input style='text-align:center' class='totalofservices form-control' type='text' size='20' name='totalofservices[]'>
    </td>
    <td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
    <td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20'  name='totalofftarget[]'></td>
  </tr>
</table>

2 个答案:

答案 0 :(得分:1)

更新了以下代码,以便正确计算和设置输入值。 totalontarger元素的key up事件处理程序无法正常工作。我也解决了这个问题。

用以下内容替换您的脚本块:

<script>
$(document).ready(function() {

  $('.totalofservices').keyup(function() {
    var tr = $(this).closest('tr');
    tr.find(".totalontarget").val(0);
    tr.find(".totalofftarget").val("0");
  });

  $('.totalontarget').keyup(function() {
    var tr = $(this).closest('tr');    
    var num1=tr.find(".totalofservices").val();
    var num2=tr.find(".totalontarget").val();

    if( num2 > num1 ) {
        alert( 'Total of Target must be less than Total on Services' );
    }
    else {
        tr.find(".totalofftarget").val(num1-num2);
    }
  });

});

 </script>

https://jsfiddle.net/cjf7m2ms/

答案 1 :(得分:1)

&#13;
&#13;
$(document).ready(function() {
  $('.totalontarget').keyup(function() {
    var tr = $(this).closest('tr');
    tr.find(".totalofftarget").val(  
    parseInt(tr.find('.totalofservices').val()) - parseInt($(this).val())    
    );
  });
});

 
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table>
  <tr>
    <td>Zone 1</td>
    <td><input style='text-align:center' class='form-control totalofservices' type='text' size='20'  name='totalofservices[]'>
    </td>
    <td><input style='text-align:center' class='totalontarget form-control' type='text' size='20'  name='totalontarget[]'></td>
    <td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20'  name='totalofftarget[]'></td>
  </tr>
  <tr>
    <td>Zone 2</td>
    <td><input style='text-align:center' class='totalofservices form-control' type='text' size='20' name='totalofservices[]'>
    </td>
    <td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
    <td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20' name='totalofftarget[]'></td>
  </tr>
  <tr>
    <td>Zone 3</td>
    <td><input style='text-align:center' class='totalofservices form-control' type='text' size='20' name='totalofservices[]'>
    </td>
    <td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
    <td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20'  name='totalofftarget[]'></td>
  </tr>
</table>
&#13;
&#13;
&#13;

我不太确定你提到的流程。如果我弄错了,请告诉我。现在,一旦总目标是密钥,它就会计算出来。