javascript - Conditionally display button on Table depending on number of visible rows -
i have form allows user add new table row via button in bottom row working , allows users delete table row leave 1 row visible. can see working example of @ jsfiddle.
i need make 1 change how delete button appears. doesn't appear when there 1 row, when add row appears rows except last row. need change using following rules:
(i) if there 1 row delete button should not appear (ii) if there 2 rows delete button should appear on rows, if 1 row delete rule (i) applies , there should no delete button again (iii) if there 3 rows delete button should appear on rows, if delete 2 rows rule (i) applies
and on.
i'm hiding delete button on first row follows:
<td> <input type="button" class="button mt5 delbtn" value="delete" id="deleterowbutton" name="deleterowbutton" style="display: none"/> </td> and here's script runs when new rows added/deleted:
$('#lastyear').on('click', '.delbtn', function () { $(this).closest('tr').remove() }); var newidsuffix = 2; $('#lastyear').on('click', '.addbtn', function () { var thisrow = $(this).closest('tr')[0]; $(thisrow).find('.delbtn').show(); var cloned = $(thisrow).clone(); cloned.find('input, select').each(function () { var id = $(this).attr('id'); id = id.substring(0, id.length - 1) + newidsuffix; $(this).attr('id', id); }); cloned.insertafter(thisrow).find('input:text').val(''); cloned.find('.delbtn').hide(); cloned.find("[id^=lastyearselect]") .autocomplete({ source: availabletags, select: function (e, ui) { $(e.target).val(ui.item.value); setdropdown.call($(e.target)); } }).change(setdropdown); $(this).remove(); newidsuffix++; }); i'm stumped @ point - appreciate solutions problem. thanks!
hi have updated code. working @ fiddle.
$('#lastyear').on('click', '.delbtn', function () { var tableref=$(this).parent("td").parent("tr").parent("tbody"); $(this).closest('tr').remove(); if( tableref.find("tr").length==3){ tableref.find("tr").find("input.addbtn").show(); tableref.find("tr").find("input.delbtn").hide(); }else{ tableref.find("tr:last").find("input.addbtn").show(); } }); var newidsuffix = 2; $('#lastyear').on('click', '.addbtn', function () { var thisrow = $(this).closest('tr')[0]; $(thisrow).find('.delbtn').show(); var cloned = $(thisrow).clone(); cloned.find('input, select').each(function () { var id = $(this).attr('id'); id = id.substring(0, id.length - 1) + newidsuffix; $(this).attr('id', id); }); cloned.insertafter(thisrow).find('input:text').val(''); cloned.find('.delbtn').show(); cloned.find("[id^=lastyearselect]") .autocomplete({ source: availabletags, select: function (e, ui) { $(e.target).val(ui.item.value); setdropdown.call($(e.target)); } }).change(setdropdown); $(this).hide(); newidsuffix++; });
Comments
Post a Comment