仅使用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. 一种删除“+”按钮并重新插入的方法，因为您有“ - ”按钮，可以删除表格中间的行。按钮位置也需要更新。