jquery - Hide the button in the last row of the table using Javascript -
here's 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 hide "plus button" in third column, , display in last row.
this 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 first length of table, loop on each row, when counter match last row of table not hide button
addheight id of div , not class name. can either make class name or use
$(this).find('#addheight').hide();
in if condition of code.
if want hide buttons make addheight class name of div , use following line:
$('.addheight').hide();
Comments
Post a Comment