Question

我想删除最后一个HTML表列，但它也删除了total。

我想保留total行，我的当前代码将其删除。（i，e total => 122602）

以下是我的演示：

＆＃13;

$(function(){
    
  $('#remove').click(function(){
      $('#showQuotation tr').find('th:last-child, td:last-child').remove();
  });

});

＆＃13;

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

＆＃13;

Answer 1

您的上一个tr只有4个td，最后一个是整个单元格。

剩下的tr个帖子有td个。

在您的html的最后td添加另一个tr，这应该有效。它使您的HTML表有效。

＆＃13;

$(function(){
    
  $('#remove').click(function(){

          $('#showQuotation tr').find('th:last-child, td:last-child').remove();
  });

});

＆＃13;

<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>
        <td contenteditable="false"></td>
    </tr>
</tbody>
</table>

＆＃13;

Answer 2

$(function(){
    
  $('#remove').click(function(){

          $('#showQuotation tr').find('th:last-child, td:last-child').remove();
  });

});

<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>
            <td>Total Amount</td>
            <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>
            <td contenteditable="false"></td>
        </tr>
    </tbody>
</table>

Answer 3

使用tr:not(#lastTotalRow)更新您的选择器，如：

$('#showQuotation tr:not(#lastTotalRow)').find('th:last-child, td:last-child').remove();

工作代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

它正在删除总金额值，因为它是该行的最后一列。

您获取需要删除的列的索引。然后使用eq和remove删除元素

$(function() {

  $('#remove').click(function() {

    var getColIndex = $('#showQuotation tr').find('th:last-child').index();
    $('#showQuotation tr th:eq(' + getColIndex + ')').remove();
    $('#showQuotation tr').each(function(e, v) {
      $(this).find('td:eq(' + getColIndex + ')').remove()
    })
  });

});

$(this).closest('table').find('thead tr th:eq('+colnum+')').remove();
$(this).closest("table").find('tbody tr td:eq('+colnum+')').remove();

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

如何使用JavaScript和jQuery从html表中删除最后一列？

4 个答案: