如何用JavaScript和jQuery移除HTML表格最后一列并保留总计行

嘿，我来帮你搞定这个问题！你想要移除表格的最后一列，但不想删掉总计行里的122602对吧？原来的代码会把所有行的最后一列都删掉，包括总计行，所以我们只需要调整一下选择器，让它跳过总计行就行。

修改后的核心代码 #

这里的关键是用:not()选择器排除总计行：

$(function(){ 
  $('#remove').click(function(){ 
    // 只处理非总计行的最后一列
    $('#showQuotation tr:not(#lastTotalRow, #lastTotalRow3333)').find('th:last-child, td:last-child').remove(); 
  }); 
});

代码解释 #

• tr:not(#lastTotalRow, #lastTotalRow3333)：这个选择器会选中表格里所有行，除了id为lastTotalRow（显示总计值122602的行）和lastTotalRow3333（显示“Total Amount”的行）的那两行
• 这样只有商品数据行和表头行的最后一列（也就是“Action”列）会被移除，总计行的内容会完整保留下来

完整可运行示例 #

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="remove" class="btn btn-danger">Remove</button>
<table class="table table-bordered" id="showQuotation" style="margin-top: 40px;">
<thead>
<tr><th>Product Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
<th>Action</th>
</tr></thead>
<tbody>
<tr class="allTheQuotationRow"><td contenteditable="false">2D Board With Tube Lites 5 "Inch" Box</td><td contenteditable="false" class="priceChangeField">470</td><td contenteditable="false" class="quantityChangeField">2</td><td contenteditable="false">940</td><td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td></tr><tr class="allTheQuotationRow"><td contenteditable="false">3D Board Immbossed Letter With Led</td><td contenteditable="false" class="priceChangeField">750</td><td contenteditable="false" class="quantityChangeField">2</td><td contenteditable="false">1500</td><td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td></tr><tr class="allTheQuotationRow"><td contenteditable="false">Standy Scrolling 2.5 x 6.5</td><td contenteditable="false" class="priceChangeField">1304</td><td contenteditable="false" class="quantityChangeField">2</td><td contenteditable="false">2608</td><td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td></tr><tr class="allTheQuotationRow"><td contenteditable="false">Star Flex With Standy 4 x 6.5</td><td contenteditable="false" class="priceChangeField">2218</td><td contenteditable="false" class="quantityChangeField">33</td><td contenteditable="false">73194</td><td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td></tr><tr class="allTheQuotationRow"><td contenteditable="false">Star Flex With Standy 4 x 6.5</td><td contenteditable="false" class="priceChangeField">2218</td><td contenteditable="false" class="quantityChangeField">20</td><td contenteditable="false">44360</td><td contenteditable="false"><span class="label label-warning removeRow" style="width:20px;cursor:pointer;">cancel</span></td></tr><tr id="lastTotalRow3333"><td contenteditable="false"></td><td contenteditable="false"></td><td contenteditable="false"></td><th>Total Amount</th><td contenteditable="false"></td></tr><tr id="lastTotalRow"><td contenteditable="false">total</td><td contenteditable="false"></td><td contenteditable="false"></td><td contenteditable="false">122602</td></tr></tbody>
</table>

<script>
$(function(){ 
  $('#remove').click(function(){ 
    $('#showQuotation tr:not(#lastTotalRow, #lastTotalRow3333)').find('th:last-child, td:last-child').remove(); 
  }); 
});
</script>

点击Remove按钮后，你会看到所有商品行的Action列被移除，而总计行的122602完全保留下来啦！

内容的提问来源于stack exchange，提问作者user5405873