html - Show Button in Last Row of the Table only using Javascript -
i have 4-column table last column containing "+" button. function add additional column when clicked. being shown in of rows, want displayed on last row of table.
here's 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 loop inside table because populating data.
here's screenshot
what want plus button displayed @ last row of table
in codes, generating rows based on template contains "+" button. should take part out of 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, should have:
a function checking/finding place/row number/element id of newest row. this:
document.getelementbyid("mytable").rows.length
return number of rows existing in table. careful of indexing though.another function insert/append "+" button specific row. this give insights.
a way delete "+" button , reinsert since have "-" button delete rows in middle of table. button position requires update too.
Comments
Post a Comment