Question

我接近这个脚本的结尾，我注意到了一个错误。可以向表中添加行，但是当我尝试删除它时，它似乎不起作用。我猜这个错误在我的JS中的某个地方。它之前正在工作，然后突然停止工作！有人可以对此有所了解吗？

谢谢， Snelly

getCollectionState

Answer 1

以下是要运作的代码：

function deleteRow(tableID) {
          debugger;
            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].nextElementSibling;
               
                if (chkbox != null  &&  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--;
                }
            }
        }

Answer 2

出于某种原因，childNodes [0]是text，childNodes [1]是您正在寻找的输入。

＆＃13;

<!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
            LinePriceAfterDiscount = (QTY * (LINEPRICENET - (LINEPRICENET * (LINEPRICEDISCOUNT))));
            object.parentNode.parentNode.querySelector('#LinePriceAfterDiscount').value = LinePriceAfterDiscount.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 = (LinePriceAfterDiscount * TAXRATE);
            object.parentNode.parentNode.querySelector("#TaxAmount").value = TAXAMOUNT.toFixed(2);
            //Calc Gross
            LINEPRICEGROSSAMOUNT = (LinePriceAfterDiscount + TAXAMOUNT);
            object.parentNode.parentNode.querySelector("#GrossOutput").value = LINEPRICEGROSSAMOUNT.toFixed(2);

            /******Calculate totals*******/
            //net		
            var arr = document.getElementsByName('LinePriceAfterDiscount[]');
            var tot = 0;
            for (var i = 0; i < arr.length; i++) {
                if (parseInt(arr[i].value))
                    tot += parseInt(arr[i].value);
            }
            document.getElementById('TotalNetAmount').value = tot;
            //VAT
            var arr = document.getElementsByName('TaxAmount[]');
            var tot = 0;
            for (var i = 0; i < arr.length; i++) {
                if (parseInt(arr[i].value))
                    tot += parseInt(arr[i].value);
            }
            document.getElementById('TotalTaxAmount').value = tot;
            //Gross
            var NetTotal = document.getElementById('TotalNetAmount').value;
            var TaxTotal = document.getElementById('TotalTaxAmount').value;
            GrossTotal = (+NetTotal + +TaxTotal);

            document.getElementById('TotalGrossAmount').value = GrossTotal;

        }




        /******Adding and removing rows******/
        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[1];
                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 1|||</th>
                <th>Line Price Net 2|||</th>
                <th>Line Price Discount% 3|||</th>
                <th>Line Price Discount Amount 4|||</th>
                <th>Line Price With Discount 5|||</th>
                <th>VAT Rate Amount 6|||</th>
                <th>VAT Amount 7|||</th>
                <th>Line Price Gross-OUTPUT 8|||</th>
            </tr>
        </thead>
		<!-- start -->
        <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" step="1" onblur="this.value = parseFloat(Math.round(this.value * 100) / 100).toFixed(2);" onchange="calculate(this);" />
                </td>
                <td>
                    <input type="number" name="LinePriceNet[]" step="0.01" 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="LinePriceAfterDiscount[]" id="LinePriceAfterDiscount">
                </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>
        <table>
            <tr>
                <td><label>Net Amount</label>
                    <input readonly="readonly" type="number" name="TotalNetAmount[]" id="TotalNetAmount">
                </td>
            </tr>
            <tr>
                <td><label>VAT Amount</label>
                    <input readonly="readonly" type="number" name="TotalTaxAmount[]" id="TotalTaxAmount">
                </td>
            </tr>
            <tr>
                <td><label>Gross Amount</label>
                    <input readonly="readonly" type="number" name="TotalGrossAmount[]" id="TotalGrossAmount">
                </td>
            </tr>
        </table>
    </form>


</body>

</html>

＆＃13;

动态HTML表单不删除行 - Javascript错误

2 个答案: