仅使用 Javascript 在表格的最后一行显示按钮

Question

I have a 4-column table with the last column containing a "+" button. its function is to add additional column when clicked. However it is being shown in all of the rows, I want it to be displayed only on the last row of the table.

Here's the code

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

Just showed the for loop inside the table because it is populating data.

Here's the screenshot

What I want is for the plus button to be displayed only at the last row of the table

Answer 1

In your codes, you are generating rows based on the template which contains "+" button. You should take this part out of the template:

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

Instead, you should have:

1. a function checking/finding the place/row number/element id of the newest row. Something like this: document.getElementById("mytable").rows.length will return number of rows existing in the table. Be careful of indexing though.

2. another function to insert/append the "+" button to specific row. This could give you some insights.

3. A way to delete the "+" button and reinsert since you have "-" button which would delete rows in the middle of the table. Button position requires update too.