javascript - in the table add a row at the top js

Question

when I click the button, I need to add a row in the table above the current

I found the search code but it adds a line at the bottom tell me where to dig to redo it

http://jsfiddle.net/Guruprasad_Rao/Lg0v4yyz/

<table id="myTable" class="order-list">
    <thead>
        <tr>
            <td>Name</td>
            <td>Price</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" name="name" />
            </td>
            <td>
                <input type="text" name="price1" />
            </td>
            <td><input type="button" id="ibtnDel"  value="Delete"></td>
            <td colspan="5" style="text-align: left;">
                <input type="button" class="addRow" id="addrow" value="Add Row" />
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="">Grand Total: $<span id="grandtotal"></span>
            </td>
        </tr>
    </tfoot>
</table>

标签： javascript

Answer 1

您可以使用insertBefore()而不是 insertAfter()

insertBefore() 方法在选定元素之前插入 HTML 元素。

 $(document).ready(function () {
        var counter = 0;

        $(document).on("click",".addRow", function () {
             console.log('clicked');
            var counter = $('#myTable tr').length - 2;

            $(document).on("click",".dele", function () {
                counter = -1
            });

            var newRow = $("<tr>");
            var cols = "";

            cols += '<td><input type="text" name="name' + counter + '"/></td>';
            cols += '<td><input type="text" name="price' + counter + '"/></td>';

            cols += '<td><input type="button" id="ibtnDel" class="dele" value="Delete"></td>';
            cols += '<td colspan="5" style="text-align: left;"><input type="button" class="addRow" value="Add Row" /></td>';


            newRow.append(cols);
            newRow.insertBefore($(this).parents().closest('tr'));
            //$("table.order-list").append(newRow);
            counter++;
        });

        $("table.order-list").on("change", 'input[name^="price"]', function (event) {
            calculateRow($(this).closest("tr"));
            calculateGrandTotal();
        });


        $("table.order-list").on("click", ".dele", function (event) {
            $(this).closest("tr").remove();
            calculateGrandTotal();
        });

    });



    function calculateRow(row) {
        var price = +row.find('input[name^="price"]').val();
    }

    function calculateGrandTotal() {
        var grandTotal = 0;
        $("table.order-list").find('input[name^="price"]').each(function () {
            grandTotal += +$(this).val();
        });
        $("#grandtotal").text(grandTotal.toFixed(2));
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="order-list">
    <thead>
        <tr>
            <td>Name</td>
            <td>Price</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" name="name" />
            </td>
            <td>
                <input type="text" name="price1" />
            </td>
            <td><input type="button" id="ibtnDel"  value="Delete"></td>
            <td colspan="5" style="text-align: left;">
                <input type="button" class="addRow" id="addrow" value="Add Row" />
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="">Grand Total: $<span id="grandtotal"></span>
            </td>
        </tr>
    </tfoot>
</table>