Question

我的HTML看起来像这样：

<input type="text" id="qty">
<input type="text" id="unp">
<input type="text" id="tv">

<input type="text" id="qty2">
<input type="text" id="unp2">
<input type="text" id="tv2">

<input type="text" id="qty3">
<input type="text" id="unp3">
<input type="text" id="tv3">

...

如何计算tv = qty*unp和tv2 = qty2*unp2？

Answer 1

首先，由于tv *是结果字段，请禁用它们。

$("input[id^=tv]").attr('disabled','disabled');

然后：

$("input[id^=qty], input[id^=unp]").keyup(function(){
    var index = $(this).attr("id").replace("qty","").replace("unp","");
    $("#tv"+index).val(parseInt($("#qty"+index).val())*parseInt($("#unp"+index).val()))
    if($("#tv"+index).val()=="NaN"){$("#tv"+index).val("");}
})

JSFIDDLE

是的，不要忘记通过添加

来导入jQuery

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

输入之前

。

Answer 2

您可以轻松获取输入值，如下所示：

document.getElementById('qty').value

并将它们设置为：

document.getElementById('tv').value = 'Hi!';

因此，使用此信息，您可以非常轻松地将另一个输入的值设置为另外两个输入的总和：

var qty = Number(document.getElementById('qty').value);
var unp = Number(document.getElementById('unp').value);
document.getElementById('tv').value = qty + unp;

Number()只需将字符串转换为数字。

示例：

document.getElementById('tv').onclick = function(){
  var qty = Number(document.getElementById('qty').value);
  var unp = Number(document.getElementById('unp').value);
  
  document.getElementById('tv').value = qty + unp;
};

document.getElementById('tv2').onclick = function(){
  var qty2 = Number(document.getElementById('qty2').value);
  var unp2 = Number(document.getElementById('unp2').value);
  
  document.getElementById('tv2').value = qty2 + unp2;
};

<input type="text" id="qty">+
<input type="text" id="unp">=
<input type="text" id="tv" placeholder="Click me!">
<br>

<input type="text" id="qty2">+
<input type="text" id="unp2">=
<input type="text" id="tv2" placeholder="Click me!">

Answer 3

基本代码：

var tv = document.getElementById("qty").value * 
document.getElementById("unp").value;

document.getElementById("tv").value = tv;

var tv2 = document.getElementById("qty2").value * 
document.getElementById("unp2").value
document.getElementById("tv2").value = tv2;

Answer 4

function tvFunction() { 
       var inputTags = document.getElementsByTagName('INPUT');  
  for(var i=1; i<=inputTags.length ; i++){


        if(i == 1) 
        {
        var qty= document.getElementById('qty').value;
        var unp = document.getElementById('unp').value;
        var result= Number(qty)*Number(unp);
        document.getElementById('tv').value = result;
        }
     else 
     {
        var qty= document.getElementById('qty'+i).value;
        var unp = document.getElementById('unp'+i).value;
        var result= Number(qty)* Number(unp);
        document.getElementById('tv'+i).value = result;
     }
  }
  }

     <input type="text" id="qty">
<input type="text" id="unp">
<input type="text" id="tv">


<input type="text" id="qty2">
<input type="text" id="unp2">
<input type="text" id="tv2">


<input type="text" id="qty3">
<input type="text" id="unp3">
<input type="text" id="tv3">

<input type="text" id="qty4">
<input type="text" id="unp4">
<input type="text" id="tv4">

<input type="text" id="qty5">
<input type="text" id="unp5">
<input type="text" id="tv5">

<input type="text" id="qty6">
<input type="text" id="unp6">
<input type="text" id="tv6">

<input type="text" id="qty7">
<input type="text" id="unp7">
<input type="text" id="tv7">

<input type="text" id="qty8">
<input type="text" id="unp8">
<input type="text" id="tv8">

    <input type="button" id="btn3"
           onclick="tvFunction()" value="Calculate">

在javascript中计算

4 个答案: