僅使用Javascript在表格的最後一行顯示按鈕

Question

我有一個4列表格，最後一列包含一個「+」按鈕。其功能是點擊時添加額外的列。但是，它顯示在所有行中，我希望它只顯示在表的最後一行。

下面的代碼

<table class="table table-responsive table-bordered" style="width:100%" id="HeightConfig"> 
    <tbody id="HeightConfigBody"> 
@if (Model != null) 
{ 
@foreach (var data in Model.Reverse()) 
{ 
    <tr> 
         <td style="width:40%"> 
    <label><b>Recorded Time:</b> <input type="text" id="recordDate" class="recordDate" 
    value="@data.recordDate.ToString("yyyy-MM-dd")" disabled></label> 
         </td> 



         <td style="width:40%"> 
         <label><b>Height (CM):</b> <input type="text" id="ColumnTypeData" class="ColumnTypeData" 
          value="@data.ColumnTypeData" ></label> 
         </td> 

         <td style="width:40%"> 
          <a class="btn btn-primary btn-default" title="delete" 
          data-target="#modal-container" data-toggle="modal" data-align="center"> 
          <div id="minusHeight"><i class="fa fa-minus" aria-hidden="true"></i></div> 
          </a> 


    <a class="btn btn-primary btn-default" title="add" > 
           <div id="addHeight" ><i class="fa fa-plus" aria-hidden="true"></i></div> 
    </a> 
         </td> 

</tr> 

} 
} 

    </tbody> 
    </table> 

就表明該表內的循環，因爲它是填充數據。

這裏的截圖

我想是要在表格的最後一行只顯示

Answer 1

在你的代碼的加號按鈕，您是基於生成行包含「+」按鈕的模板。你應該把這個部分了模板：

<a class="btn btn-primary btn-default" title="add"> 
    <div id="addHeight" ><i class="fa fa-plus" aria-hidden="true"></i> 
    </div> 
</a> 

相反，你應該有：

1. 功能檢查/查找最新行的地方/行號/元素ID。像這樣的：document.getElementById("mytable").rows.length將返回表中存在的行數。儘管如此，請小心索引。

2. 將「+」按鈕插入/附加到特定行的另一功能。 This可以給你一些見解。

3. 一種刪除「+」按鈕並重新插入的方法，因爲您有「 - 」按鈕，可以刪除表格中間的行。按鈕位置也需要更新。