javascript - 动态 HTML 表单 - Javascript 计算错误

标签 javascript html forms

我目前正在开发一个发票项目。

到目前为止，我有一个动态表单，您可以在其中添加和删除行(请参阅下面的代码片段)。

但是我的 javascript 有问题，我想知道是否有人可以帮助我解决这个问题。

基本上，当您将值输入到第一行的表单中时，它会完美地计算出所有结果。但是，如果您添加一个新行并尝试用一些数据填充它，则 JavaScript 似乎不会对该行执行任何计算。它只适用于第一排，这真的让我很沮丧!我似乎无法弄清楚为什么。

非常感谢任何帮助。代码片段如下，您可以运行它并向某些行添加一些数据以供自己查看。我需要任何关于这方面的建议。

提前谢谢大家。

斯奈利

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
	<script type="text/javascript">
    function calculate() {
		var QTY = document.getElementById("Qty").value;
        var LINEPRICENET = document.getElementById("LinePriceNet").value;
		var LINEPRICEDISCOUNT = document.getElementById("LinePriceDiscountInput").value;
		var TAXRATE = document.getElementById("TaxRate").value;
		// Lineprice with discount
		LINEPRICEWITHDISCOUNT =  (QTY*(LINEPRICENET - (LINEPRICENET * (LINEPRICEDISCOUNT))));		   
        document.getElementById('LinePriceWithDiscount').value = LINEPRICEWITHDISCOUNT.toFixed(2);
		//Line Price discount Amount
		LINEPRICEDISCOUNTAMOUNT =  (QTY*(LINEPRICENET) - (QTY*(LINEPRICENET - (LINEPRICENET * (LINEPRICEDISCOUNT)))));		   
        document.getElementById("LinePriceDiscountAmount").value = LINEPRICEDISCOUNTAMOUNT.toFixed(2);
		//Tax calculation
		TAXAMOUNT = (LINEPRICEWITHDISCOUNT * TAXRATE);
		document.getElementById("TaxAmount").value = TAXAMOUNT.toFixed(2);
		//Calc Gross
		LINEPRICEGROSSAMOUNT = (LINEPRICEWITHDISCOUNT + TAXAMOUNT);
		document.getElementById("GrossOutput").value = LINEPRICEGROSSAMOUNT.toFixed(2);		
    }
	
function addRow(tableID) {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
		var row = table.insertRow(rowCount);
		var colCount = table.rows[0].cells.length;
		for(var i=0; i<colCount; i++) {
			var newcell = row.insertCell(i);
			newcell.innerHTML = table.rows[0].cells[i].innerHTML;
		}

}

function deleteRow(tableID) {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
	for(var i=0; i<rowCount; i++) {
		var row = table.rows[i];
		var chkbox = row.cells[0].childNodes[0];
		if(null != chkbox && true == chkbox.checked) {
			if(rowCount <= 1) { 						// limit the user from removing all the fields
				alert("Cannot Remove all of the items!.");
				break;
			}
			table.deleteRow(i);
			rowCount--;
			i--;
		}
	}
}	
</script>
</head>
<body>
    <form  name="CalculationTesting" >
		<p>
			<input type="button" value="Add Item" onClick="addRow('dataTable')" /> 
			<input type="button" value="Remove Selected Item" onClick="deleteRow('dataTable')"  /> 
		</p>
		        <thead>
            <tr>
                <th>Qty</th>			
                <th>Line Price Net</th>
                 <th>Line Price Discount%</th>
				 <th>Line Price Discount Amount</th>
				 <th>Line Price With Discount</th>
				 <th>VAT Rate Amount</th>
				 <th>VAT Amount</th>
				 <th>Line Price Gross-OUTPUT</th>    
            </tr>
        </thead>
        <table id="dataTable" border="1"  width="600" height="50" cellpadding="10" cellspacing="3">
            <tr>
			               
                    <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
                </td>
                <td>
                    <input type="number" name="Qty" id="Qty" onchange="calculate();"/>
                </td>			
                <td>
                    <input type="number" name="LinePriceNet" id="LinePriceNet" onchange="calculate();"/>
                </td>
			 <td>
                    <select type="number" name="LinePriceDiscount" id="LinePriceDiscountInput" onchange="calculate();"/>
						<option value="0.00">None</option>
						<option value="0.01">1%</option>
						<option value="0.02">2%</option>
						<option value="0.03">3%</option>
						<option value="0.04">4%</option>
						<option value="0.05">5%</option>
						<option value="0.06">6%</option>
						<option value="0.07">7%</option>
						<option value="0.08">8%</option>
						<option value="0.09">9%</option>
						<option value="0.10">10%</option>
					</select>
                </td>
				<td>
                    <input readonly="readonly"  type="number" name="LinePriceDiscountAmount" id="LinePriceDiscountAmount">
                </td>
				<td>
                    <input readonly="readonly"  type="number" name="LinePriceWithDiscount" id="LinePriceWithDiscount">
                </td>
				<td>
                    <select type="number" name="TaxRate" id="TaxRate" onchange="calculate();"/>
						<option value="0.00">Zero Rate</option>
						<option value="0.20">Standard(20%)</option>
						<option value="0.00">Exempt</option>
						<option value="0.05">Reduced Rate</option>
						<option value="0.00">Outside The Scope</option>
					</select>
                </td>
				<td>
                    <input readonly="readonly"  type="number" name="TaxAmount" id="TaxAmount">
                </td>
				<td>
                    <input readonly="readonly"  type="number" name="GrossOutput" id="GrossOutput">
                </td>
            </tr>
        </table>
		
    </form>


</body>
</html>

最佳答案

我能够使用以下代码修复它。可能会有更清晰的版本。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
	<script type="text/javascript">
    function calculate(object) {
		var QTY = object.parentNode.parentNode.querySelector('#Qty').value;
        var LINEPRICENET = object.parentNode.parentNode.querySelector("#LinePriceNet").value;
		var LINEPRICEDISCOUNT = object.parentNode.parentNode.querySelector("#LinePriceDiscountInput").value;
		var TAXRATE = object.parentNode.parentNode.querySelector("#TaxRate").value;
		// Lineprice with discount
		LINEPRICEWITHDISCOUNT =  (QTY*(LINEPRICENET - (LINEPRICENET * (LINEPRICEDISCOUNT))));		   
        object.parentNode.parentNode.querySelector('#LinePriceWithDiscount').value = LINEPRICEWITHDISCOUNT.toFixed(2);
		//Line Price discount Amount
		LINEPRICEDISCOUNTAMOUNT =  (QTY*(LINEPRICENET) - (QTY*(LINEPRICENET - (LINEPRICENET * (LINEPRICEDISCOUNT)))));		   
        object.parentNode.parentNode.querySelector("#LinePriceDiscountAmount").value = LINEPRICEDISCOUNTAMOUNT.toFixed(2);
		//Tax calculation
		TAXAMOUNT = (LINEPRICEWITHDISCOUNT * TAXRATE);
		object.parentNode.parentNode.querySelector("#TaxAmount").value = TAXAMOUNT.toFixed(2);
		//Calc Gross
		LINEPRICEGROSSAMOUNT = (LINEPRICEWITHDISCOUNT + TAXAMOUNT);
		object.parentNode.parentNode.querySelector("#GrossOutput").value = LINEPRICEGROSSAMOUNT.toFixed(2);
    }
	
function addRow(tableID) {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
		var row = table.insertRow(rowCount);
		var colCount = table.rows[0].cells.length;
		for(var i=0; i<colCount; i++) {
			var newcell = row.insertCell(i);
			newcell.innerHTML = table.rows[0].cells[i].innerHTML;
		}

}

function deleteRow(tableID) {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
	for(var i=0; i<rowCount; i++) {
		var row = table.rows[i];
		var chkbox = row.cells[0].childNodes[0];
		if(null != chkbox && true == chkbox.checked) {
			if(rowCount <= 1) { 						// limit the user from removing all the fields
				alert("Cannot Remove all of the items!.");
				break;
			}
			table.deleteRow(i);
			rowCount--;
			i--;
		}
	}
}	
</script>
</head>
<body>
    <form  name="CalculationTesting" >
		<p>
			<input type="button" value="Add Item" onClick="addRow('dataTable')" /> 
			<input type="button" value="Remove Selected Item" onClick="deleteRow('dataTable')"  /> 
		</p>
		        <thead>
            <tr>
                <th>Qty</th>			
                <th>Line Price Net</th>
                 <th>Line Price Discount%</th>
				 <th>Line Price Discount Amount</th>
				 <th>Line Price With Discount</th>
				 <th>VAT Rate Amount</th>
				 <th>VAT Amount</th>
				 <th>Line Price Gross-OUTPUT</th>    
            </tr>
        </thead>
        <table id="dataTable" border="1"  width="600" height="50" cellpadding="10" cellspacing="3">
            <tr>
			               
                    <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
                </td>
                <td>
                    <input type="number" name="Qty" id="Qty" onblur="this.value = parseFloat(Math.round(this.value * 100) / 100).toFixed(2);" onchange="calculate(this);"/>
                </td>			
                <td>
                    <input type="number" name="LinePriceNet" id="LinePriceNet" onblur="this.value = parseFloat(Math.round(this.value * 100) / 100).toFixed(2);" onchange="calculate(this);"/>
                </td>
			 <td>
                    <select type="number" name="LinePriceDiscount" id="LinePriceDiscountInput" onchange="calculate(this);"/>
						<option value="0.00">None</option>
						<option value="0.01">1%</option>
						<option value="0.02">2%</option>
						<option value="0.03">3%</option>
						<option value="0.04">4%</option>
						<option value="0.05">5%</option>
						<option value="0.06">6%</option>
						<option value="0.07">7%</option>
						<option value="0.08">8%</option>
						<option value="0.09">9%</option>
						<option value="0.10">10%</option>
					</select>
                </td>
				<td>
                    <input readonly="readonly"  type="number" name="LinePriceDiscountAmount" id="LinePriceDiscountAmount">
                </td>
				<td>
                    <input readonly="readonly"  type="number" name="LinePriceWithDiscount" id="LinePriceWithDiscount">
                </td>
				<td>
                    <select type="number" name="TaxRate" id="TaxRate" onchange="calculate(this);"/>
						<option value="0.00">Zero Rate</option>
						<option value="0.20">Standard(20%)</option>
						<option value="0.00">Exempt</option>
						<option value="0.05">Reduced Rate</option>
						<option value="0.00">Outside The Scope</option>
					</select>
                </td>
				<td>
                    <input readonly="readonly"  type="number" name="TaxAmount" id="TaxAmount">
                </td>
				<td>
                    <input readonly="readonly"  type="number" name="GrossOutput" id="GrossOutput">
                </td>
            </tr>
        </table>
		
    </form>


</body>
</html>

问题是，每当您使用计算函数时，它只会从第一行获取值，因为每行没有不同的 id。这里我使用 this 来区分每一行。

我不得不使用 parentNode 两次。如果您找到更清晰的版本，请分享。

此外，使用 jQuery 会让事情变得更容易。

关于javascript - 动态 HTML 表单 - Javascript 计算错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44738684/

上一篇：javascript - 等距拓扑排序问题

下一篇：php - 在 html 文本区域中输入引号和双引号，而数据库中的插入操作失败。是否可以？

相关文章：

javascript - js中如何统计数组每个元素的字符个数？

html - 如何在选择下拉列表中应用占位符以及 Angular 6 中的 [ngmodel]？

javascript - HTML Canvas 绘制形状

javascript - Dropzone JS - 所有文件上传后重定向

javascript - Ionic 框架如何添加带有国家/地区代码的手机号码表单？

javascript - 在 javascript 中使用值返回所有深度对象的嵌套键的好方法

javascript - 使用 Beautiful Soup 从 Google 搜索中提取数据/链接

javascript - 如何获取放置在 Canvas 上的图像的点击事件

javascript - 使用 jQuery 提交后清除表单

javascript - 在 Angular js 中提交时需要进行字段验证

©2024 IT工具网  联系我们