如何使用javascript动态生成总计

Question

在这里，我想动态创建总计。 我得到了总价格和数量。 但我不能得到总计的总数，所以请求解决这个问题，在这里我必须使用php for for ten row

 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获取“ 演示 ”的所有元素，然后计算它们。

检查snippest。

 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>