使用Javascript将按钮隐藏在表格的最后一行

Question

Here's my html

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

I need to hide the "plus button" in the third column, and display only in the last row.

this is what I got

<script>
 debugger;
        var x = document.getElementById("HeightConfig").rows.length;
        var ctr = 1
        $("#HeightConfig tbody tr").each(function (key, value) {
            debugger;

            if (ctr != x)
            {
                $(this).find('.addHeight').hide();

            }
            ctr++;
        });
</script>

i get first the length of the table, then loop on each row, then when the counter match the last row of the table it will not hide the button

Answer 1

No need for all that (as you guessed). :-)

In modern browsers (basically anything except IE8 and earlier; details ), you could do it with CSS via :not with :last-of-type :

#HeightConfig tr:not(:last-of-type) a[title=add] {
  display: none;
}

Example:

 #HeightConfig tr:not(:last-of-type) a[title=add] { display: none; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <table class="table table-responsive table-bordered" style="width:100%" id="HeightConfig"> <tbody id="HeightConfigBody"> <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> <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> <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> <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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Otherwise, with jQuery, you can use :not and the jQuery-specific :last :

$("#HeightConfig tr:not(:last) a[title=add]").hide();

Example:

 $("#HeightConfig tr:not(:last) a[title=add]").hide(); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <table class="table table-responsive table-bordered" style="width:100%" id="HeightConfig"> <tbody id="HeightConfigBody"> <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> <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> <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> <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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

You can solve this using simple CSS

#HeightConfig tr a[title=add] {
  display: none;
}

#HeightConfig tr:last-child a[title=add] {
  display: block;
}

or using jQuery

$("#HeightConfig tr a[title=add]").hide();
$("#HeightConfig tr:last-child a[title=add]").show();

As per your comment, If you want just hide all buttons you can simply put:

$("#HeightConfig tr a[title=add]").hide();

or in css

#HeightConfig tr a[title=add] {
   display: none;
}

Answer 3

addHeight is the id of the div and not the class name. You can either make it the class name or use

 $(this).find('#addHeight').hide();

in the if condition of your code.

If you want to hide all the buttons simply make addheight the class name of the div and then use the following line:

$('.addHeight').hide();