Question

我在html表中有以下布局：

<table>
<tr><td>Id</td><td>Item Name</td><td>Value</td></tr>
<tr><td>1</td><td>Shampoo</td><td>200</td></tr>
<tr><td>2</td><td>Soap</td><td>20</td></tr>
<tr><td>3</td><td>Toothpaste</td><td>8</td></tr>
<tr><td></td><td>Others</td><td><input class="ta" type="text" value="" /></td></tr>
<tr><td></td><td>Total</td><td><input id="tp" type="text" value="228" /></td></tr>
</table>

表行的数据是从mysql数据库中获取的，除了第5行（Item：Others）。页面加载时，＆＃34; Total＆＃34;的值也是从mysql数据库中获取的。如果用户将任何值放入＆＃34;其他＆＃34;行，每次＆＃34; Total＆＃34;的值应该总和用户输入值+＆＃34; Total＆＃34;行。

我试图通过以下jquery代码执行此操作：

$(document).ready(function(){
$(".ta").keyup(function(){
  var vat = $(this).val();
    var total = $("#tp").val();
        total = vat+total;
    $("#tp").val(total);
});
});

但是，它不是两个值的总和，而是添加输入值。 i，g：如果总计为5,000且用户输入为50，则它不能将总计算为5050，而是将总值更改为505000.我认为这两个字段中的任何一个都是通过jquery评估为文本而不是数字。 / p>

什么是正确的代码？

Answer 1

您需要在添加之前解析这些文本框值。您还需要修改输入元素选择器。 ta是元素的id。你应该使用id选择器（#）：

$("#ta").keyup(function(){
var vat = parseInt($(this).val());
var total = parseInt($("#tp").val());
    total = vat+total;
$("#tp").val(total);
});

Answer 2

试

$(document).ready(function(){
$("#ta").keyup(function(){
  var vat = $('#ta').val();
    var total = $("#tp").val();
        total = vat+total;
    $("#tp").val(total);
});
});

Answer 3

您正在使用class选择器而不是id选择器（因为HTML结构中没有类ta的元素）并使用parseInt()，如下所示： - < / p>

$(document).ready(function(){
  $("#ta").keyup(function(){  //  <-----correct here
    var vat = parseInt( $(this).val(),10 ) || 0;  // <------use parseInt() here
    var total = parseInt( $("#tp").val(),10 ) || 0; // <------use parseInt() here
        total = vat+total;
    $("#tp").val(total);
  });
});

Answer 4

使用psrseInt javascript函数

$(document).ready(function(){
 $("#ta").keyup(function(){
 var vat = parseInt($(this).val());
 var total = parseInt($("#tp").val());
 $("#tp").val(vat+total);
 });
});

Answer 5

您需要将total的值存储在变量中，否则您将丢失原始值。

另外要添加textfields（字符串）的值，需要将它们转换为int（使用unary plus或parseInt（））

＆＃13;

$(document).ready(function() {
  //store the initial value
  var total = +$("#tp").val() || 0;
  $("#ta").keyup(function() {
    var vat = +$(this).val() || 0;
    $("#tp").val(vat + total);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Id</td>
    <td>Item Name</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>1</td>
    <td>Shampoo</td>
    <td>200</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Soap</td>
    <td>20</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Toothpaste</td>
    <td>8</td>
  </tr>
  <tr>
    <td></td>
    <td>Others</td>
    <td>
      <input id="ta" type="text" value="" />
    </td>
  </tr>
  <tr>
    <td></td>
    <td>Total</td>
    <td>
      <input id="tp" type="text" value="228" />
    </td>
  </tr>
</table>

＆＃13;

Answer 6

Qty1 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty2 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty3 : <input onblur="findTotal()" type="text" name="qty" id="qty3"/><br>
Qty4 : <input onblur="findTotal()" type="text" name="qty" id="qty4"/><br>
Qty5 : <input onblur="findTotal()" type="text" name="qty" id="qty5"/><br>
Qty6 : <input onblur="findTotal()" type="text" name="qty" id="qty6"/><br>
Qty7 : <input onblur="findTotal()" type="text" name="qty" id="qty7"/><br>
Qty8 : <input onblur="findTotal()" type="text" name="qty" id="qty8"/><br>
<br><br>
Total : <input type="text" name="total" id="total"/>


<script type="text/javascript">
function findTotal(){
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
    if(parseInt(arr[i].value))
        tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}

</script>

如何将两个输入字段相加

6 个答案: