我想获取输入数量、成本和折扣字段后计算出的总金额。
使用 onchange 有效吗？我应该做什么？
function calculatePrice(costElement,qtyElement, discElement, priceElement) {
priceElement.value = qtyElement.value * costElement.value - ((discElement.value * qtyElement.value * costElement.value)/100);
}
function myfunction(){
var table=document.getElementById("mytable");
//adding row
var row=table.insertRow(table.rows.length);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
var cell5=row.insertCell(4);
var cell6=row.insertCell(5);
// addind rows and values
var objInputCheckBox = document.createElement("input");
objInputCheckBox.type = "checkbox";
cell1.appendChild(objInputCheckBox);
var ele2 = document.createElement('input');
ele2.setAttribute('type', 'text');
ele2.setAttribute('value', '');
cell2.appendChild(ele2);
//cost
var ele3 = document.createElement('input');
ele3.setAttribute('type', 'text');
ele3.setAttribute('value', '');
ele3.onchange = function(){
calculatePrice(this.parentElement.parentElement.childNodes[2].childNodes[0], this, this, this.parentElement.parentElement.childNodes[5].childNodes[0]);
};
cell3.appendChild(ele3);
//qty
var ele4 = document.createElement('input');
ele4.setAttribute('type', 'text');
ele4.setAttribute('value', '');
ele4.onchange = function(){
calculatePrice(this, this.parentElement.parentElement.childNodes[3].childNodes[0], this, this.parentElement.parentElement.childNodes[5].childNodes[0]);
};
cell4.appendChild(ele4);
//discount
var ele5 = document.createElement('input');
ele5.setAttribute('type', 'text');
ele5.setAttribute('value', '');
ele5.onchange = function(){
calculatePrice(this, this, this.parentElement.parentElement.childNodes[4].childNodes[0], this.parentElement.parentElement.childNodes[5].childNodes[0]);
};
cell5.appendChild(ele5);
var ele6 = document.createElement('input');
ele6.setAttribute('type', 'text');
ele6.setAttribute('value', '');
cell6.appendChild(ele6);
}
function delrow(id){
var table=document.getElementById(id);
var rowcount=table.rows.length;
for(var i=0;i<rowcount;i++){
var row= table.rows[i];
var chk=row.cells[0].childNodes[0];
if(chk.checked){
table.deleteRow(i);
rowcount--;
i--;
}
}
}<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<script type="text/javascript" src="js/table.js"></script>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table id="mytable">
<tr>
<th> </th>
<th>Item</th>
<th>Cost</th>
<th>Quantity</th>
<th>Discount</th>
<th>Total</th>
</tr>
</table>
<button onclick="myfunction()">Add</button>
<button onclick="delrow('mytable')">Delete</button>
</body>
</html>我没有正确地对其进行 CSS 样式设置，因为我的重点是计算总价。
我尝试了很多次，甚至搜索也没有得到它。
我在某处看到:
this.parentElement.parentElement.childNodes[4].childNodes[0]
这是什么意思？
最佳答案
我将使用 .onkeyup 获得更灵敏的反馈，然后添加一个处理程序来传递您创建的行，如下所示:
function calculateCost(row) {
return function () {
row.total.value = row.cost.value * row.qty.value * row.discount.value
}
}
function myfunction() {
var table = document.getElementById("mytable");
//adding row
var row = table.insertRow(table.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
// addind rows and values
var objInputCheckBox = document.createElement("input");
objInputCheckBox.type = "checkbox";
cell1.appendChild(objInputCheckBox);
//item
var ele2 = document.createElement('input');
ele2.setAttribute('type', 'text');
ele2.setAttribute('value', '');
cell2.appendChild(ele2);
//cost
var ele3 = document.createElement('input');
ele3.setAttribute('type', 'text');
ele3.setAttribute('value', '');
cell3.appendChild(ele3);
//qty
var ele4 = document.createElement('input');
ele4.setAttribute('type', 'text');
ele4.setAttribute('value', '');
cell4.appendChild(ele4);
//discount
var ele5 = document.createElement('input');
ele5.setAttribute('type', 'text');
ele5.setAttribute('value', '');
cell5.appendChild(ele5);
//total
var ele6 = document.createElement('input');
ele6.setAttribute('type', 'text');
ele6.setAttribute('value', '');
cell6.appendChild(ele6);
var row = {
item: ele2,
cost: ele3,
qty: ele4,
discount: ele5,
total: ele6
}
var updateCostHandler = calculateCost(row);
row.cost.onkeyup = updateCostHandler;
row.qty.onkeyup = updateCostHandler;
row.discount.onkeyup = updateCostHandler;
}
function delrow(id) {
var table = document.getElementById(id);
var rowcount = table.rows.length;
for (var i = 0; i < rowcount; i++) {
var row = table.rows[i];
var chk = row.cells[0].childNodes[0];
if (chk.checked) {
table.deleteRow(i);
rowcount--;
i--;
}
}
}<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<script type="text/javascript" src="js/table.js"></script>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table id="mytable">
<tr>
<th> </th>
<th>Item</th>
<th>Cost</th>
<th>Quantity</th>
<th>Discount</th>
<th>Total</th>
</tr>
</table>
<button onclick="myfunction()">Add</button>
<button onclick="delrow('mytable')">Delete</button>
</body>
</html>关于javascript - 当我制作动态发票时，如何使用 JavaScript 在 HTML 表中进行计算？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50824916/