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

how to insert new row on last table row?

本文关键字：插入 新行 表格 最后一个      更新时间：2023-09-26

我想在总价上方显示新行，以及如何在单击添加按钮时在最后一行插入上面的新行。

非常感谢！

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>

解决这个问题的最佳方法是什么？谢谢你

$('.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>');

你可以为此使用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{
        }
    });

这是示例小提琴

现有的答案声明使用 tr：last 作为选择器，.before 作为方法，对于您的要求是正确的，但我想我会把它作为替代方案：为什么不有一个包含总价格行的 tfoot 部分？

如果您想以不同的方式设置总计行的样式，这会更方便。例如，如果您想要行项目的滚动条（仅在正文上），但始终希望显示标题和页脚。如果你想要计算多少行数据（没有总数），那么这也更自然，所以你可以只得到一个tbody tr的计数，而不必减去总行。在查看CSS样式（主观）时，它也可能更容易理解。

此外，您现有的$('.addcost_table tbody').append将按原样工作。

你也可以尝试用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

试试这个

$('.addcost_table tbody tr:last').before($('.addcost_table tbody tr:eq(0)').clone(true));
相关文章：