Question

我想在总价格＆amp;上显示上面的新行当我点击添加按钮时，如何在最后一行上面插入新行。

非常感谢你！

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选择器，从tr获取tbody的最后.addcost_table tbody tr:last，然后使用tr密钥追加before

您的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将按原样运作。

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

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

5 个答案:

JSFiddle