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

Popular posts from this blog

.htaccess - First slash is removed after domain when entering a webpage in the browser -

Automatically create pages in phpfox -

c# - Farseer ContactListener is not working -