javascript - 如何使用javascript动态生成总计

Question

在这里我想创建动态总计。我得到了价格和数量的总和。但我无法获得总计，所以恳请解决这个问题，这里我必须使用 php for 循环十行

function myFunction(time,v) {
var p="price"+time;
var d="demo"+time;
var y = document.getElementById(p).value;
var z = v;
var ans=y*z;
document.getElementById(d).value = ans;
}
function my(time,ans) {
//alert('You have not Login  !!');
var p="demo"+time;
var y = document.getElementById(p).value;
	//var z=y+ans;
	document.getElementById("total").innerHTML = ans;
}

<table>
  <?php
	$i=0;
     while($i<=10)
					  {
					?>
				<tr>					
	  <td> <input id="price<?php echo $i; ?>" type="text" readonly value="5"></td>
	  <td><input id="qty" type="number" value="0"  onChange="myFunction(<?php echo $i; ?>,this.value)" ></td>
	 <td><input id="demo<?php echo $i; ?>" type="text" value="0"  onChange="my(<?php echo $i; ?>,this.value)" >
						
						</td>
</tr>					
	<?php 
	$i++; 
	}?>

<h4> Total :- <span id = "total"></span></h4>
</table>

Answer 1

存储您的总计数全局，并按获取“演示”的所有元素 querySelector，然后计算它们。

检查片段。

var _mytotal=0;
function _Function1(time,v)
{
	var p="price"+time;
	var d="demo"+time;
	var y = document.getElementById(p).value;
	var z = v;
	var ans=y*z;
	document.getElementById(d).value = ans;
	_mytotal=0;
	_Function2();
}
function _Function2()
{
	var demos = document.querySelectorAll('*[id^="demo"]');
	demos.forEach(_FunctionTotal);
}
function _FunctionTotal(item) 
{
    _mytotal = +_mytotal + +document.getElementById(item.id).value;
    document.getElementById("total").textContent = _mytotal;
}

<table>
	<tr>		
		<th>Price</th>
		<th>Quantity</th>
		<th>Total</th>
	</tr>
	<tr>
		<td><input id="price0" type="text" readonly value="5"></td>
		<td><input id="qty" type="number" value="0" onChange="_Function1(0,this.value)" ></td>
		<td><input id="demo0" type="text" readonly value="0" ></td>
	</tr>
	<tr>
		<td><input id="price1" type="text" readonly value="5"></td>
		<td><input id="qty" type="number" value="0" onChange="_Function1(1,this.value)" ></td>
		<td><input id="demo1" type="text" readonly value="0" ></td>
	</tr>
	<tr>
		<td><input id="price2" type="text" readonly value="5"></td>
		<td><input id="qty" type="number" value="0" onChange="_Function1(2,this.value)" ></td>
		<td><input id="demo2" type="text" readonly value="0" ></td>
	</tr>
	<tr>
		<td><input id="price3" type="text" readonly value="5"></td>
		<td><input id="qty" type="number" value="0" onChange="_Function1(3,this.value)" ></td>
		<td><input id="demo3" type="text" readonly value="0" ></td>
	</tr>
	<tr>
		<td><input id="price4" type="text" readonly value="5"></td>
		<td><input id="qty" type="number" value="0" onChange="_Function1(4,this.value)" ></td>
		<td><input id="demo4" type="text" readonly value="0" ></td>
	</tr>
	<tr>
		<td><h4>Grand Total</h4></td>
		<td>&nbsp;</td>
		<td><h4><span id = "total"></span></h4></td>
	</tr>
</table>