Question

我想要一个用户可以在其中添加和删除行的表单。添加输入后，相应的字段将通过乘以数量*费用以及底部的总计字段进行更新。

由于我是js新手，所以我使用了以前的answer

中的代码

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

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

最终目的是使用户使用表创建报价，然后使用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>

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.");

    }
}

这应该导致您的删除被生成。但是我们对id有一个问题，因为如果您删除第二行而又有第三行，那么您指定id的方式将导致重复的id。因此，如果删除项目，则必须减少后续行的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，这样我就可以轻松测试我编写的代码。

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

1 个答案: