动态HTML表单 - Javascript计算错误

时间：2017-06-24 16:43:53

标签： javascript html forms

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

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

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

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

非常感谢任何帮助。下面是代码片段，您可以运行它并将一些数据添加到某些行中以供自己查看。我需要任何建议。

先谢谢你们。

Snelly 

<!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>

1 个答案:

答案 0 :(得分：2)

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

<!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会使事情变得更容易。

相关问题
最新问题