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

Question

我想在總價上方顯示新行，並在單擊添加按鈕時如何在最后一行上方插入新行。

非常感謝！

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>

什么是解決此問題的最佳方法？ 謝謝你

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

您可以為此使用before選擇器，通過.addcost_table tbody tr:last獲取tbody的最后一個tr ，然后使用before鍵附加您的tr 。

您的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{

        }

    });

這是示例FIDDLE

Answer 3

現有答案表明使用tr：last作為選擇器，使用.before作為方法對您的要求是正確的，但我想將其作為替代方法：為什么不使用包含總價格的tfoot部分代替嗎？

如果您想對總行設置不同的樣式，這會更方便。 例如，如果您想為訂單項使用滾動條（僅在tbody上），但始終希望顯示thead和tfooter。 如果您想要統計數據的行數（無總值），那么這也將更加自然，因此您只需獲得tbody tr的計數即可，而不必減去總行數。 在查看CSS樣式（主觀）時，它可能也更容易理解。

另外，您現有的$('.addcost_table tbody').append將$('.addcost_table tbody').append工作。

Answer 4

您也可以嘗試使用eq，然后點贊

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