仅使用 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>

刚刚在表格中显示了 for 循环，因为它正在填充数据。

这是截图

我想要的是加号按钮只显示在表格的最后一行

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