javascript - 使用计算 Js 动态添加和删除行

Question

我想要一个用户可以添加和删除行的表单。添加输入后，各个字段将通过乘以 qty * cost 以及底部总字段来更新。

由于我是 js 新手，因此我使用了以前答案中的代码

但是，删除功能不起作用。

我尝试了其他解决方案，但是当一行被删除时，值不会更新。

最终目标是让用户使用表创建报价并使用 ajax 将其发布到 mysql 数据库。

因此，我将 querySelectorAll 更改为一个类，例如 class=qty，因为不允许有多个相同的 id。

以下是我到目前为止所拥有的。

表格：

<form name="add_name" id="add_service">

    <table id="dataTable" class="form" border="1">
        <tbody>
        <tr id='row_0'>

            <td>
                <label>Service</label>
                <input type="text" required="required" 
                name="service[]">
            </td>
            <td>
                <label>Quantity</label>
                <input type="text" class="qty" required="required" 
                name="qty[]" oninput="calculate('row_0')">
            </td>
            <td>
                <label for="price">Price</label>
                <input type="text" class="cost" required="required" 
                name="cost[]" oninput="calculate('row_0')">
            </td>
            <td>
                <label for="total">Total</label>
                <input type="text" class="subtotal" 
                required="required" name="subtotal[]">
           </td>

            <!--<td>
                <a class="remove" href="#">Remove</a>
            </td>-->
        </tr>
        </tbody>
    </table>

    <div>

        <input type="text" class="" id="grand_total">
    </div>

    <input type="button" name="submit" id="submit" class="btn btn- 
     info" value="Submit"/>
    </form>

<script>

$(document).ready(function () {

    /**$('table').on('click', 'tr a.remove', function (e) {
        e.preventDefault();
        $(this).closest('tr').remove();
    });*/

    //submit data
    $('#submit').click(function () {
        $.ajax({
            url: "push.php",
            method: "POST",
            data: $('#add_service').serialize(),
            success: function (data) {
                alert(data);
                $('#add_service')[0].reset();
            }
        });
    });
});



function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if (rowCount < 10) { 
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;
        row.id = 'row_' + rowCount;
        for (var i = 0; i < colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.outerHTML = table.rows[0].cells[i].outerHTML;
        }
        var listitems = row.getElementsByTagName("input")
        for (i = 0; i < listitems.length; i++) {
            listitems[i].setAttribute("oninput", "calculate('" + 
        row.id + "')");
        }
    } else {
        alert("Maximum 10.");

    }
}


function calculate(elementID) {
    var mainRow = document.getElementById(elementID);
    var myBox1 = mainRow.querySelectorAll('[class=qty]')[0].value;
    var myBox2 = mainRow.querySelectorAll('[class=cost]')[0].value;
    var total = mainRow.querySelectorAll('[class=subtotal]')[0];
    var myResult1 = myBox1 * myBox2;
    total.value = myResult1;

    grandtotal();
}

function grandtotal(){

    //calculation script
    var $form = $('#add_service'),
        $sumDisplay = $('#grand_total');

    var $summands = $form.find('.subtotal');
    var sum = 0;
    $summands.each(function ()
    {
        var value = Number($(this).val());
        if (!isNaN(value)) sum += value;
    });

    $sumDisplay.val(sum);
}

</script>

标签： javascript

Answer 1

从问题中不清楚如何addRow被调用。我假设它是由事件触发的。您将需要取消注释删除td并设置值onclick：

<td>
    <input type="button" class="remove" value="Remove" onclick="removeRow('dataTable', '0');">
</td>

并修改addRow如下：

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if (rowCount < 10) { 
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;
        row.id = 'row_' + rowCount;
        for (var i = 0; i < colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.outerHTML = table.rows[0].cells[i].outerHTML;
        }
        var listitems = row.getElementsByTagName("input")
        for (i = 0; i < listitems.length - 1; i++) {
            listitems[i].setAttribute("oninput", "calculate('" + 
        row.id + "')");
        }
        listitems[listitems.length - 1].setAttribute("onclick", "removeRow('dataTable', " + row.id + ")");
    } else {
        alert("Maximum 10.");

    }
}

这应该会导致生成您的删除。但是我们有一个 ids 的问题，因为如果你删除了第二行并且有第三行，那么你指定 ids 的方式将导致重复的 ids。因此，如果您删除一个项目，则必须减少后续行的 id。让我们实现removeRow：

function removeRow(tableID, index) {
    //Removing the row
    var table = document.getElementById(tableID);
    table.deleteRow(index);
    //Modifying the ids of subsequent rows
    var rowCount = table.rows.length;
    for (var i = index; i < rowCount; i++) {
        table.rows[i].id = "row_" + i;
    }
    //Handling the counts
    grandtotal();
}

该代码未经测试，如果您对它有任何问题，我建议您创建一个 JSFiddle，这样我就可以轻松测试我编写的代码。