Javascript 使用另一个输入框将同一类的文本字段值动态相乘

我使用Coldfusion动态创建了以下表单。不同的输入在加载时都有不同的值，但共享同一个类

我将有另一个具有唯一标识符的输入字段-permup

表格如下所示：

<table width="100%" border="0" cellpadding="0" cellspacing="0" id="county-table" style="margin-top: 15px;">

<tr>
<TD>Length</TD>
<TD align="center">PerM</TD>
</tr>

<tr bgcolor="#ffffff">

<TD>from 1-10m</TD>
<TD align="center"><input class="perm" type="text" name="PerM1" value="1.60"  size="6" /></TD>

</tr>



<tr bgcolor="#efefef">

<TD>from 11-20m</TD>
<TD align="center"><input class="perm" type="text" name="PerM2" value="1.10"  size="6" /></TD>

</tr>



<tr bgcolor="#ffffff">

<TD>from 21-50m</TD>
<TD align="center"><input class="perm" type="text" name="PerM3" value="1.50"  size="6" /></TD>

</tr>



<tr bgcolor="#efefef">

<TD>from 51-80m</TD>
<TD align="center"><input class="perm" type="text" name="PerM4" value="1.55"  size="6" /></TD>


</tr>



<tr bgcolor="#ffffff">

<TD>from 81-150m</TD>
<TD align="center"><input class="perm" type="text" name="PerM5" value="1.10"  size="6" /></TD>


</tr>



<tr bgcolor="#efefef">

<TD>from 151-200m</TD>
<TD align="center"><input class="perm" type="text" name="PerM6" value="1.10"  size="6" /></TD>


</tr>



<tr>

<td>&nbsp;</td>
<td><input id="permup" type="text" name="permup" value="0"  size="6" /></td>

</tr>

</table>

我需要的是，当有人在permup字段中键入基本速率增加值时，带有.perm类的字段的所有值都会增加该值，如果有人将permup字段设置为0，则带有.perm的字段会设置回其原始值

这必须与类名上的JQuery配合使用，因为表行可以是任何数字。我有以下脚本：

<script language="JavaScript" type="text/javascript">

$('#permup').keyup( function() { 

    $('.perm').each(function(){

        var defaultValue = $(this).val();

        $(this).val( $('#permup').val() * defaultValue );

    });

});

</script>

它可以工作，但是在.perm字段中设置的每个值都是相同的，而且当字段perm被点击出或设置为零时，也会做一些奇怪的事情

我希望有人能帮忙

非常感谢

JS

尝试使用parseFloat并使用keyup和focus事件，如图所示：-

$('#permup').on('keyup focus', function() {
   $('.perm').each(function(){
      var defaultval = $('#permup').val();
      var myValue;
      if(defaultval == "0"){ 
        myValue = $(this).attr('value') 
       }
      else{
        myValue = parseFloat( parseFloat($(this).attr('value')) * parseFloat(defaultval) ) || $(this).attr('value')
       }
       $(this).val( myValue );
   });
});

---

旁注：-在javascript/jquery中处理数字时，请始终尝试使用parseInt或parseFloat，否则数字也会被视为字符串。

正如其他人所说，您需要确保使用数字进行计算，而不是.value属性给定的默认值。此外，当您遇到如何在修改旧值后检索旧值的问题时，不建议在显示器中存储值。下面是实现您想要的功能并跟踪原始值的代码

  <script language="JavaScript" type="text/javascript">


   // Store default values
   var perm_items = document.getElementsByClassName("perm");
   var orig_perm_values = new Array(perm_items.length);

   for (var i = perm_items.length - 1; i >= 0; i--)
  {
    orig_perm_values[i] = perm_items[i].value;

    document.getElementById('out').innerHTML = orig_perm_values[i];
  }


     function updateValues(event)
  {   
     for (var i = perm_items.length - 1; i >= 0; i--)
     {
        perm_items[i].value = (parseFloat(orig_perm_values[i]) + parseFloat(event.target.value)).toFixed(2);
     }
  }   

  </script>

---

在你尝试做数学之前，确保你确实有数字。我也没有看到你定义默认值的地方。这可能就是问题所在。parseInt25A7返回了什么？感谢您抽出时间来查看！很抱歉回复太晚，但由于某些原因没有收到通知！这几乎是可行的-然而，当我在permup字段中输入2时，它会按它应该做的那样做，但是如果我删除2并决定需要它们全部乘以4，那么新的计算是4*输入2时得到的值！我的意思是，如果一个字段的初始值为10，我在permup中输入2，值为20，这都是好的，但是如果我随后决定实际增加4，值是80，而不是40，框的原始值。这有意义吗？谢谢你。document.writehello+parseInt123A4++parseFloat123A4+goodby；返回你好123再见。与@Kartikeya不同，我实际测试了它。@JanSolo..如果你想减少小数点，而不是使用.toFixed2来设置文本框的值。这太棒了-非常感谢你花时间为我解决这个问题-我在兜圈子！！