如何在最后一个表格行上插入新行？

Question

I want to show new row above on the total Price & how to insert the new row above on the last row when i click on the add button.

Thanks You so much!

Jquery

//for addPrice click button
    $('#add_price').on('click',function(){
        if($('.supplier').is(":checked") == true){

           $('.addcost_table tbody').append('<tr><td>Hotel</td><td>Twin Room</td><td>TWN</td><td>5</td><td class="cost_price">100</td><td class="selling_price">120</td></tr>');
           $('table .selling_price').hide();
        }else{

        }

    });

HTML

<table class="addcost_table table tablesorter">
            <thead>
                <tr class="header_row">
                    <th>Item Group</th>
                    <th>Name</th>
                    <th>Code</th>
                    <th>Quantity</th>
                    <th class="cost_price">Unit Cost Price</th>
                    <th class="selling_price">Unit Selling Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                   <td>Hotel</td>
                   <td>Twin Room</td>
                   <td>TWN</td>
                   <td>5</td>
                   <td class="cost_price">100</td>
                   <td class="selling_price">120</td>
                </tr>
                <tr>
                   <td>Hotel</td>
                   <td>Single Room</td>
                   <td>SGL</td>
                   <td>1</td>
                   <td class="cost_price">80</td>
                   <td class="selling_price">100</td>
                </tr>
                 <tr>
                   <td>Meals</td>
                   <td>Buffet Breakfast</td>
                   <td>BRE</td>
                   <td>2</td>
                   <td class="cost_price">10</td>
                   <td class="selling_price">10</td>
                </tr>
                <tr>
                   <td  colspan="4">Total Price X Qty</td>
                   <td class="cost_price">$500</td>
                   <td class="selling_price">$500</td>

                </tr>
            </tbody>
        </table>

what is the best to solve this problem?. Thanks u

Answer 1

$('.addcost_table > tbody:last').before('<tr><td>Hotel</td><td>Twin Room</td><td>TWN</td><td>5</td><td class="cost_price">100</td><td class="selling_price">120</td></tr>');

Answer 2

You can user before selector for that, Get the last tr of the tbody by .addcost_table tbody tr:last and then append your tr by using before key

Your script should like this,

$('#add_price').on('click',function(){
        if($('.supplier').is(":checked") == true){

           $('.addcost_table tbody tr:last').before('<tr><td>Hotel</td><td>Twin Room</td><td>TWN</td><td>5</td><td class="cost_price">100</td><td class="selling_price">120</td></tr>');
           $('table .selling_price').hide();
        }else{

        }

    });

Here is Example FIDDLE

Answer 3

The existing answers stating to use tr:last as the selector and .before as the method are correct for what you're asking, but thought I'd throw this out as an alternative: Why not have a tfoot section that contains the total price row instead?

This can be more convenient if you'd like to style the total row differently. For example, if you want a scrollbar for the line items (on just the tbody) but always want to display the thead and tfooter. If you want a count of how many rows of data (sans total) then this would be more natural too, so you can just get a count of tbody tr rather than having to subtract the total row. It may also be slightly more readily understandable when looking at CSS styling (subjective.)

In addition, your existing $('.addcost_table tbody').append would work as is.

Answer 4

You can also try with eq and after like

var row = $('.addcost_table>tbody>tr').length;  //get the no of tr
$('.addcost_table>tbody>tr').eq(row-1); //total row -1 is above the Total price tr
     .before('<tr><td>Hotel</td><td>Twin Room</td><td>TWN</td><td>5</td><td class="cost_price">100</td><td class="selling_price">120</td></tr>');

JSFiddle

Answer 5

尝试这个

$('.addcost_table tbody tr:last').before($('.addcost_table tbody tr:eq(0)').clone(true));