刪除最後一個表格行以編程方式添加到HTML表格

我正在開發ASP.NET Web Api 2.2應用程序與.NET Framework 4.5，C＃和jQuery。刪除最後一個表格行以編程方式添加到HTML表格

我有一個視圖此表：

<table id ="batchTable" class="order-list"> 
    <thead> 
     <tr> 
      <td> 
       <h4>Product</h4> 
      </td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td> 
       <h4>Codes</span></h4> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <h4>Label1</h4> 
      </td> 
      <td> 
       <h4>Label2</h4> 
      </td> 
      <td> 
       <h4>Label3</h4> 
      </td> 
      <td> 
       <h4>Label4</h4> 
      </td> 
      <td> 
       <h4>Label5</h4> 
      </td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <div class="group"> 
        <input type="text" 
         name="BatchProducts[0].BatchName" 
         id="BatchProducts[0].BatchName" 
         required /> 
        @*<span class="highlight"></span> 
        <span class="bar"></span> 
        <label>Name</label>*@ 
       </div> 
      </td> 
      <td> 
       <div class="group"> 
        <input type="text" 
         name="BatchProducts[0].BatchPO" 
         id="BatchProducts[0].BatchPO" 
         required /> 
        @*<span class="highlight"></span> 
        <span class="bar"></span> 
        <label>PO</label>*@ 
       </div> 
      </td> 
      <td> 
       <div class="group">  
        <input type="text" class="datepicker" 
         name="BatchProducts[0].MadeDate" 
         id="BatchProducts[0].MadeDate" 
         required /> 
        @*<span class="highlight"></span> 
        <span class="bar"></span> 
        <label>Made</label>*@ 
       </div> 
      </td> 
      <td> 
       <div class="group">  
        <input type="text" class="monthPicker" 
         name="BatchProducts[0].ValidateDate" 
         id="BatchProducts[0].ValidateDate" 
         required /> 
        @*<span class="highlight"></span> 
        <span class="bar"></span> 
        <label>Validate</label>*@ 
       </div> 
      </td> 
      <td> 
       <div class="group">  
        <input type="text" class="quantity" 
         name="BatchProducts[0].Quantity" 
         id="BatchProducts[0].Quantity" 
         onkeydown='return (window.event.keyCode >= 48 && window.event.keyCode <= 57) || window.event.keyCode == 8 || window.event.keyCode == 46' 
         required /> 
        @*<span class="highlight"></span> 
        <span class="bar"></span> 
        <label>Quantity</label>*@ 
       </div> 
      </td> 
     </tr> 
    </tbody> 
    <tfoot> 
     <tr> 
      <td colspan="5"> 
       <table> 
        <tr> 
         <td style="text-align: left;"> 
          <input type="button" id="addrow" value="Add" /> 
         </td> 
         <td> 
          <input type="button" class="ibtnDel" value="Delete last row"> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </tfoot> 
</table>

我使用jQuery，當用戶點擊addRow按鈕來動態地添加新行，並且當他們點擊按鈕ibtnDel用戶也可以刪除最後一行。

我有刪除按鈕的問題。這是它的JavaScript：

$("table.order-list").on("click", ".ibtnDel", function (event) { 
    $('table.order-list').each(function() { 
     if ($('table.order-list > tbody > tr', this).length > 0) { 
      $('table.order-list tbody tr:last', this).remove(); 
     } else { 
      $('tr:last', this).remove(); 
     } 
    }); 

    counter -= 1 
    $('#addrow').attr('disabled', false).prop('value', "Add"); 
});

但它不工作，因爲if ($('table.order-list > tbody > tr', this).length > 0)總是返回0。此代碼刪除tr其中的按鈕Add和Delete last row是。

此代碼：

if ($('tbody', this).length > 0) { 
    $('tbody tr:last', this).remove();

當兩個按鈕Add和Delete last row在內部表裏面沒有工作過。

<tfoot> 
    <tr> 
     <td style="text-align: left;"> 
      <input type="button" id="addrow" value="Add" /> 
     </td> 
     <td> 
      <input type="button" class="ibtnDel" value="Delete last row"> 
     </td> 
    </tr> 
</tfoot>

我該如何讓它工作？

JSFidle：https://jsfiddle.net/VansFannel/fa0z225s/12/這是我的第一個JSFidle，它不起作用。我不知道你是否可以編輯它。

來源

2015-12-22 VansFannel

您可以在[JSFiddle]（http://www.jsfiddle.net/）上提供一個簡單的_sample_代碼嗎？ –

我無法看到ASP.NET部件如何與jQuery問題相關？ – Anders

我已經添加了JSFiddle，https://jsfiddle.net/VansFannel/fa0z225s/5/，但它不工作，因爲這是我的第一個JSFiddle，我不知道如何使它工作。 @Anders，這是一個ASP.NET應用程序，我已經添加了儘可能多的細節。 – VansFannel

嘗試這樣的事情......

$("table.order-list").on("click", ".ibtnDel", function (event) { 
    if ($('table.order-list > tbody > tr') { 
     $('table.order-list > tbody >tr:last-child').remove(); 
    } 
counter -= 1 
$('#addrow').attr('disabled', false).prop('value', "Add"); 
});

來源

2015-12-22 08:18:47

的this在$('table.order-list > tbody > tr', this)是內看上下文。所以this在$('table.order-list').each(function() {是表，你在哪裏試圖尋找table.order-list內部本身 - >

$("table.order-list").on("click", ".ibtnDel", function (event) { 
    $('table.order-list').each(function() { 
     // 'this' is now a table element with the class 'order-list' 
     if ($('table.order-list > tbody > tr', this).length > 0) { 
     // here you are looking for table.order-list inside 'this' which 
     // is already that element.

所以，你可以將其更改爲： -

$("table.order-list").on("click", ".ibtnDel", function (event) { 
    if ($('table.order-list > tbody > tr').length > 0) { 
     $('table.order-list > tbody > tr:last').remove(); 
    } 
});

FIDDLE

，或者你有多個表： -

$("table.order-list").on("click", ".ibtnDel", function (event) { 
    var table = $(this).closest('table'); 
    if ($('tbody > tr', table).length > 0) { 
     $('tbody > tr:last', table).remove(); 
    } 
});

FIDDLE

UPDATE

如果您使用的是表內的表，那麼你需要更具體與您的選擇。要做到這一點的方法之一是使用>，這意味着直接/直接子： -

$("table.order-list").on("click", ".ibtnDel", function(event) { 
    if ($('table.order-list > tbody > tr').length > 0) { 
     $('table.order-list > tbody > tr:last').remove(); 
    } 

    counter -= 1 
    $('#addrow').attr('disabled', false).prop('value', "Añadir otro lote"); 
});

FIDDLE

來源

2015-12-22 08:19:38 BenG

我測試了你的第一個選項，它不起作用。我用JSFddle更新了我的問題，但是我無法使它工作，因爲這是我第一次創建它。 – VansFannel

我很抱歉，但是我上傳到JSFiddle的示例出錯了。該HTML是錯誤的，正確的例子是https://jsfiddle.net/VansFannel/fa0z225s/12/ – VansFannel

看到我上面的更新。 – BenG

在代碼中，這條線$('table.order-list > tbody > tr', this).length發現裏面有this元素中父table.order-listtbody的tr元素，意味着您只能在表格內找到元素。所以只要將代碼修改

$('tbody > tr', this).length

和

$('tbody tr:last', this).remove()

來源

2015-12-22 08:22:12

請檢查這一項，這可能會幫助你保持你的按鈕排在最後的位置

<table id="myTable" border="1"> 
    <tbody> 
    <tr> 
     <th>Table Header</th> 
     <th>Table Header</th> 
    </tr> 
    <tr> 
     <td>Table cell 1</td> 
     <td>Table cell 2</td> 
    </tr> 
    <tr> 
     <td>Table cell 3</td> 
     <td>Table cell 4</td> 
    </tr> 
    <tr> 
     <td><button type="button" class="ibtnAdd">Add Row</button></td> 
     <td><button type="button" class="ibtnDel">Remove Row</button></td> 
    </tr> 
    </tbody> 
</table> 


<script> 
$("table#myTable").on("click", ".ibtnDel", function (event) { 
    var table = $(this).closest('table'); 
    var rowLen = $(table).find('tr').length-2; 
    $('tbody > tr').eq($(table).find('tr').length-2).remove(); 
}); 
</script>

DEMOFIDDLE

來源

2015-12-22 12:22:49

刪除最後一個表格行以編程方式添加到HTML表格

回答

相關問題