html table - How can I remove an HtmlTableRow with jQuery? -
i've got htmltable sports 2 rows default, can "grow" 6 code:
/* makes next hidden row visible, long there 1 */ $(document).on("click", '[id$=btnaddfoapalrow]', function (e) { $('[id$=foapalhtmltable]').find('tr:hidden:first').show(); }); actually, 6 rows are created in code-behind, first 2 set "display:none" - code above exposes them one-by-one.
i need accomplish opposite: if user clicks matching "-" button (btnremovefoapalrow), last row should hidden. how that? here's pseudocode, i'm sure wrong in @ least of particulars:
/* removes last displayed row, long there more 2 such */ $(document).on("click", '[id$=btnremovefoapalrow]', function (e) { $('[id$=foapalhtmltable]').find('tr:displayed:last').hide(); }); additionally, need prevent hiding first 2 rows, should visible. there way check count of non-hidden rows and, if 2 or less, disallow further hiding?
expanding on answer 1 of previous questions can use:
$(document).on("click", '[id$=btnremovefoapalrow]', function (e) { if ($("[id$=foapalhtmltable] tr:visible").length > 2) { $('[id$=foapalhtmltable]').find('tr:visible:last').hide(); } }); it might idea show , hide buttons when no longer useful. e.g if there can't remove anymore rows, hide collapse button.
on side note [id$=foapalhtmltable] inefficient selector, better off using jquery class selector (like in snippet below) or handling asp.net name mangling of id's , using id selector. e.g:
$(document).on("click", '#<%=btnremovefoapalrow.clientid%>', function (e) { $(".expander").click(function() { $('.inputtable').find('tr:hidden:first').show(); }); $(".collapser").click(function() { console.log($(".inputtable tr:visible").length); if ($(".inputtable tr:visible").length > 2) { $('.inputtable').find('tr:visible:last').hide(); } });.inputtable tr:nth-child(n + 3) { display: none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_btnaddfoapalrow" type="button" class="expander">+</button> <button id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_btnaddfoapalrow" type="button" class="collapser">-</button> <table border="2" class="inputtable"> <tr> <td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label">index</span> </td> <td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">fund</span> </td> <td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">organization</span> </td> <td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">account</span> </td> <td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">activity</span> </td> <td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">amount</span> </td> </tr> <tr> <td width="88px"> <input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl130" type="text" class="dplatypus-webform-field-input" style="width:88px;" /> </td> <td width="88px"> <input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl132" type="text" class="dplatypus-webform-field-input" style="width:88px;" /> </td> <td width="88px"> <input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl134" type="text" class="dplatypus-webform-field-input" style="width:88px;" /> </td> <td width="88px"> <input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl136" type="text" class="dplatypus-webform-field-input" style="width:88px;" /> </td> <td width="88px"> <input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl138" type="text" class="dplatypus-webform-field-input" style="width:88px;" /> </td> <td width="88px"> <input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl140" type="text" class="dplatypus-webform-field-input" style="width:88px;" /> </td> </tr> <tr id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_foapalrow3"> <td width="88px"> <input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxindex2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxindex2foapalrow3" class="dplatypus-webform-field-input" /> </td> <td width="88px"> <input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxfund2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxfund2foapalrow3" class="dplatypus-webform-field-input" /> </td> <td width="88px"> <input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxorg2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxorg2foapalrow3" class="dplatypus-webform-field-input" /> </td> <td width="88px"> <input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxaccount2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxaccount2foapalrow3" class="dplatypus-webform-field-input" /> </td> <td width="88px"> <input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxactivity2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxactivity2foapalrow3" class="dplatypus-webform-field-input" /> </td> <td width="88px"> <input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxamount2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxamount2foapalrow3" class="dplatypus-webform-field-input" /> </td> </tr> <tr id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_foapalrow4"> <td width="88px"> <input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxindex3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxindex3foapalrow4" class="dplatypus-webform-field-input" /> </td> <td width="88px"> <input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxfund3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxfund3foapalrow4" class="dplatypus-webform-field-input" /> </td> <td width="88px"> <input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxorg3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxorg3foapalrow4" class="dplatypus-webform-field-input" /> </td> <td width="88px"> <input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxaccount3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxaccount3foapalrow4" class="dplatypus-webform-field-input" /> </td> <td width="88px"> <input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxactivity3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxactivity3foapalrow4" class="dplatypus-webform-field-input" /> </td> <td width="88px"> <input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxamount3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxamount3foapalrow4" class="dplatypus-webform-field-input" /> </td> </tr> </table>
Comments
Post a Comment