Question

我的发票不是表格，但在html中的div内部是一些输入字段。这些字段是通过单击按钮动态创建的。

<li><input type="text" id="cost[]" name="unit[]" value="<?php echo $val->unit ; ?>"> </li>
<li><input type="text" id="qty[]" name="rate[]" value="<?php echo $val->rate ; ?>"> </li>
<li><input type="text" id="price[]" name="total[]" value="<?php echo $val->total ; ?>"> </li>

现在我想将单位乘以rate并将其显示在总字段中。

我的Javascript是

 window.onkeyup=function() {

        var str = document.getElementById("cost[]").value;
        var str1 = document.getElementById("qty[]").value;
        var price = parseFloat(str*str1);
        document.getElementById("price[]").value = price;
}

上面的javascript工作正常但它只适用于第一行。对于第一行下面的其余行，它不起作用。我想要计算所有行。我已经看到了一些答案，但在我的案例中都没有。

欢迎任何帮助。

Answer 1

我从您的代码中看到的是，您可能对多个项目使用相同的ID。

＆＃34; id＆＃34;属性为元素指定名称。该名称在文档中必须是唯一的。

虽然我们有一个解决方法，如：

document.querySelectorAll("[id='someID']");

选择所有具有相同＆＃34; id＆＃34; s的元素，您的HTML将无效。

这就是为什么我们有＆＃34; class＆＃34;代替。一个类是一组元素。

虽然我使用了＆＃34; name＆＃34;属性。

可能是您正在寻找的：

＆＃13;

 window.onkeyup=function() {
	
var items = document.querySelectorAll(".item");
var itemsArray = Array.prototype.slice.call(items,0);
var unit, rate, total, net = 0;
itemsArray.forEach(function(el){
	unit = el.querySelector('input[name="unit[]"]').value;
	rate = el.querySelector('input[name="rate[]"]').value;
	total = unit * rate;
	el.querySelector('input[name="total[]"]').value = total;
	net+=total;
});
document.getElementById('net').value=net;
}

＆＃13;

<div class='item'>
	<li><input type="text"  name="unit[]" value=""> </li>
	<li><input type="text"  name="rate[]" value=""> </li>
	<li><input type="text" name="total[]" value=""> </li>
</div>

<br><br>

<div class='item'>
	<li><input type="text" name="unit[]" value=""> </li>
	<li><input type="text" name="rate[]" value=""> </li>
	<li><input type="text" name="total[]" value=""> </li>
</div>

</br></br>

<li><input id='net' type="text" name="net[]" value=""> </li>

＆＃13;

Answer 2

var invoices = document.querySelectorAll('.invoice')
var handleChange = function (foo, bar, total) {
	let str = +foo.value || 0
	let str2 = +bar.value || 0

  total.value = parseFloat(str*str2)
}

invoices.forEach(function(invoice) {
	
  var foo = invoice.querySelector('input[name=foo]')
  var bar = invoice.querySelector('input[name=bar]')
  var total = invoice.querySelector('input[name=total]')
  
  foo.addEventListener('keyup', function() {
  	handleChange(foo, bar, total)
  })
  bar.addEventListener('keyup', function() {
  	handleChange(foo, bar, total)
  })
})

<div class="invoice">
  <input type="text" name="foo">
  <input type="text" name="bar">
  <input type="text" name="total">
</div>
<div class="invoice">
  <input type="text" name="foo" value="">
  <input type="text" name="bar" value="">
  <input type="text" name="total">
</div>
<div class="invoice">
  <input type="text" name="foo">
  <input type="text" name="bar">
  <input type="text" name="total">
</div>
<div class="invoice">
  <input type="text" name="foo">
  <input type="text" name="bar">
  <input type="text" name="total">
</div>
<div class="invoice">
  <input type="text" name="foo">
  <input type="text" name="bar">
  <input type="text" name="total">
</div>

请注意我如何将+添加到str＆amp;的解析中。 str2此运算符将任意String个数字转换为Number 我建议您这样做，因为在查询input[type=text]的值时，它会为您提供以String表示的值...

在乘以例如'1'*'2'// = 2 ...

时这很好

但是，如果你想将ADD两个数字放在一起，你的总和将被解释为连接，例如'2'+'2' // = '22'

如果未提供值或将字母或特殊字符放入输入中，例如'hello'*'2' // = NaN

，则将值默认为0也可能是明智之举

尝试

var str = +foo.value || 0;

var str1 = +bar.value || 0;

var price = parseFloat(str*str1);

或者，输入type="number"这将限制用户只能输入数字。

Answer 3

正如我之前所说，不建议您在HTML上使用相同的id保留多个元素。但是如果你想保持这种方式，那么你可以使用document.querySelectorAll并迭代元素来总结它们的值并将其存储在总数中：

＆＃13;

window.onkeyup=function() {

  var costs = document.querySelectorAll("input[id='cost[]'");
  var qtys = document.querySelectorAll("input[id='qty[]'");
  
  var price = 0;
  
  for (var i = 0; i < costs.length; i++){
   price += +costs[i].value + +qtys[i].value;
  }

  document.getElementById("price[]").value = price;
}

＆＃13;

<input type="text" id="cost[]" name="unit[]" value="2">
<input type="text" id="qty[]" name="rate[]" value="4">
<br>
<input type="text" id="cost[]" name="unit[]" value="2">
<input type="text" id="qty[]" name="rate[]" value="4">
<br>
<input type="text" id="cost[]" name="unit[]" value="2">
<input type="text" id="qty[]" name="rate[]" value="4">
<br>
<input type="text" id="cost[]" name="unit[]" value="2">
<input type="text" id="qty[]" name="rate[]" value="4">

<input type="text" id="price[]" name="total[]" value="">

＆＃13;

计算多个字段的值并显示Javascript中的每一行

3 个答案: