如何删除带有 jQuery 的 HtmlTableRow？

Question

我有一个默认显示两行的 HtmlTable，但是使用此代码最多可以 "grow" 六行：

/* 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();
});

实际上，所有六行 都是在代码隐藏中创建的 ，但是除了前两行之外的所有行都设置为 "display:none" - 上面的代码公开了它们一个 -一个。

我还需要完成相反的操作：如果用户单击匹配的“-”按钮 (btnRemoveFoapalRow)，最后一行应该被隐藏。怎么做？这是伪代码，我确信它至少在某些细节上是错误的：

/* 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();
});

此外，我需要防止它隐藏前两行，它们应该始终可见。有没有办法检查非隐藏行的数量，如果是两个或更少，则不允许进一步隐藏？

Answer 1

可以肯定地说您可以使用

 $(this).closest('tr').remove();

删除 table 行。使用 onclick 处理程序中的代码。阅读此方法以在您的特定场景中找到正确的 table 行。

Answer 2

扩展您之前的一个问题的答案，您可以使用：

$(document).on("click", '[id$=btnRemoveFoapalRow]', function (e) {
  if ($("[id$=foapalhtmltable] tr:visible").length > 2) {
     $('[id$=foapalhtmltable]').find('tr:visible:last').hide();
  }
});

当按钮不再有用时显示和隐藏它们可能也是一个想法。例如，如果您不能再删除行，请隐藏折叠按钮。

旁注 [id$=foapalhtmltable] 是一个非常低效的选择器，你最好使用 jQuery class 选择器（就像我下面的代码片段）或处理 ASP.net ID 的名称修改和使用 ID 选择器。例如：

$(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>

Answer 3

从 Jon P 的回答中得出，以下是最适合我的（就像手链一样）：

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

如何删除带有 jQuery 的 HtmlTableRow？

How can I remove an HtmlTableRow with jQuery?

jquery

hidden

html-table