I've got an HtmlTable that is created with six rows (HtmlTableRows). By setting "display" to "none" on the last four rows, it only displays the first two rows by default, but the HtmlTable can "grow" up to six HtmlTableRows (from the user's perspective) with this code:

1. /* This makes the next hidden row visible, as long as there is one */
   $(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
       $('[id$=foapalhtmltable]').find('tr:hidden:first').show();
   });

The above works; I now need to accomplish the opposite: if a user clicks the matching btnRemoveFoapalRow button, the last row should be hidden with each click - until there are the original two left, and then prevent further hiding of the rows. How to do that? Here's pseudocode, which I'm sure is wrong in at least some of its particulars:

1. /* This removes the last displayed row, as long as there are more than two such */
   $(document).on("click", '[id$=btnRemoveFoapalRow]', function (e) {
       $('[id$=foapalhtmltable]').find('tr:displayed:last').hide();
   });

IOW, I don't know what the opposite of "tr:hidden" is (tr:displayed?), nor the opposite of "show" (hide?).

Or is it possible to "negate" the first code, something like this:

1.     $('[id$=foapalhtmltable]').find('tr:!displayed:last').hide();

?