Question

我在表中添加行并删除，这很好用。使用oninput=""事件我也可以通过调用javascript函数来计算总费用。现在，我添加<form></form>的那一刻，既不能添加行也不能向前移动任何行。我是javascript的新手，并且不知道发生了什么。请帮助别人。

<div class="container">
    <p>Add and Delete Items with Total Cost Value</p>
    <form>
        <div id="tableDiv">
            <table id="myTableHead">
                <tr>
                    <th>Item Name</th>
                    <th>Item Cost</th>
                </tr>
                <tr>
                    <td><input type="text" name="ItemName[]" id="ItemName" /></td>
                    <td><input class="ItemCostClass" type="number" name="ItemCost[]" oninput="myTotalFunction()" id="ItemCost" /></td>
                </tr>
            </table>
            <table id="myTable">

            </table>
            <table id="myTableTot">
                <tr>
                    <td><input type="text" name="Total" value="Total Cost Value --->" readonly /></td>
                    <td><input type="number" name="TotalValue" id="TotalValue" value=0 readonly /></td>
                </tr>
            </table>
        </div>
        <br>
        <button onclick="myCreateFunction()">Create row</button>
        <button onclick="myDeleteFunction()">Delete row</button>
    </form>
</div>

<script>
    function myCreateFunction() {
        var TotalCostValueCurrent = parseFloat(document.getElementById("TotalValue").value);
        if (TotalCostValueCurrent <= 25000) {
            var table = document.getElementById("myTable");
            var row = table.insertRow(-1);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = '<input type="text" name="ItemName[]" id="childItemName" />';
            cell2.innerHTML = '<input class="ItemCostClass" type="number" name="ItemCost[]" oninput="myTotalFunction()" id="childItemCost" />'; 
        } else {
            window.alert("Sorry, You Have Reached Max Shipping Value Limit of 25000, please reduce Pieces to Max Value of 25000");
        }

    }

    function myTotalFunction() {
        var arrItemCost = document.getElementById("tableDiv").getElementsByClassName("ItemCostClass");
        var arrLen = arrItemCost.length;
        var i = 0;
        var itemCostSum = 0;
        while (i <= arrLen && itemCostSum <= 25000) {
            if (itemCostSum <= 25000) {
                itemCostSum = itemCostSum + parseFloat(arrItemCost[i].value);
                i++;
                document.getElementById("TotalValue").value = Math.ceil(itemCostSum); // Update Total Value
            }
        } 
    }

    function myDeleteFunction() {
        var arrItemCost = document.getElementById("tableDiv").getElementsByClassName("ItemCostClass");
        var arrLen = arrItemCost.length;

        var TotalValueCurrent = parseFloat(document.getElementById("TotalValue").value);
        var itemCostFinal = 0;
        itemCostFinal = TotalValueCurrent - parseInt(arrItemCost[arrLen-1].value);

        //FINAL OUTPUT
        document.getElementById("myTable").deleteRow(-1);   // Delete Last Row
        document.getElementById("TotalValue").value = Math.ceil(itemCostFinal); // Final Cost Value
        document.getElementById("tableDiv").getElementsByClassName("ItemCostClass").pop(); // Drop last value of Item Array
    }
</script>

Answer 1

在表单内部标签按钮倾向于执行提交的默认操作。

所以改变你的按钮，

<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>

到

<input type="button" onclick="myCreateFunction()" value="Create row">
<input type="button" onclick="myDeleteFunction()" value ="Delete row">

Answer 2

您必须添加输入标记而不是按钮标记。因为表单中的按钮标记指定了默认的提交事件，所以当您添加任何行并刷新时，您的表单会被提交。

<div class="container">
		<p>Add and Delete Items with Total Cost Value</p>
		<form>
			<div id="tableDiv">
				<table id="myTableHead">
					<tr>
						<th>Item Name</th>
						<th>Item Cost</th>
					</tr>
					<tr>
						<td><input type="text" name="ItemName[]" id="ItemName" /></td>
						<td><input class="ItemCostClass" type="number" name="ItemCost[]" oninput="myTotalFunction()" id="ItemCost" /></td>
					</tr>
				</table>
				<table id="myTable">

				</table>
				<table id="myTableTot">
					<tr>
						<td><input type="text" name="Total" value="Total Cost Value --->" readonly /></td>
						<td><input type="number" name="TotalValue" id="TotalValue" value=0 readonly /></td>
					</tr>
				</table>
			</div>
			<br>
			<input type="button" onclick="myCreateFunction()" value="Create row" />
			<input type="button" onclick="myDeleteFunction()" value="Delete row" />
		</form>
	</div>

	<script>
	function myCreateFunction() {
		var TotalCostValueCurrent = parseFloat(document.getElementById("TotalValue").value);
		if (TotalCostValueCurrent <= 25000) {
			var table = document.getElementById("myTable");
			var row = table.insertRow(-1);
			var cell1 = row.insertCell(0);
			var cell2 = row.insertCell(1);
			cell1.innerHTML = '<input type="text" name="ItemName[]" id="childItemName" />';
			cell2.innerHTML = '<input class="ItemCostClass" type="number" name="ItemCost[]" oninput="myTotalFunction()" id="childItemCost" />'; 
		} else {
			window.alert("Sorry, You Have Reached Max Shipping Value Limit of 25000, please reduce Pieces to Max Value of 25000");
		}

	}

	function myTotalFunction() {
		var arrItemCost = document.getElementById("tableDiv").getElementsByClassName("ItemCostClass");
		var arrLen = arrItemCost.length;
		var i = 0;
		var itemCostSum = 0;
		while (i < arrLen && itemCostSum <= 25000) {
			if (itemCostSum <= 25000) {
				itemCostSum = itemCostSum + parseFloat(arrItemCost[i].value);
				i++;
				document.getElementById("TotalValue").value = Math.ceil(itemCostSum); // Update Total Value
			}
		} 
	}

	function myDeleteFunction() {
		var arrItemCost = document.getElementById("tableDiv").getElementsByClassName("ItemCostClass");
		var arrLen = arrItemCost.length;

		var TotalValueCurrent = parseFloat(document.getElementById("TotalValue").value);
		var itemCostFinal = 0;
		itemCostFinal = TotalValueCurrent - parseInt(arrItemCost[arrLen-1].value);

		//FINAL OUTPUT
		document.getElementById("myTable").deleteRow(-1);   // Delete Last Row
		document.getElementById("TotalValue").value = Math.ceil(itemCostFinal); // Final Cost Value
		document.getElementById("tableDiv").getElementsByClassName("ItemCostClass").pop(); // Drop last value of Item Array
	}
	</script>

html中的oninput事件工作正常，直到添加<form> </form>？

2 个答案: