Question

我有一个HtmlTable默认运行两行，但可以＆＃34;成长＆＃34;使用此代码最多六个：

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

实际上，在代码隐藏中创建了所有六行，但除了前两个之外的所有行都被设置为＆＃34; display：none＆＃34; - 上面的代码一个接一个地公开它们。

我还需要完成相反的操作：如果用户点击匹配的＆＃34; - ＆＃34;按钮（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();
});

此外，我需要阻止它隐藏前两行，这两行应始终可见。有没有办法检查非隐藏行的数量，如果是2或更少，则禁止进一步隐藏？

Answer 1

可以说你可以使用

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

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

Answer 2

Expanding on an answer to one of your previous questions you 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 also be an idea to show and hide the buttons when they are no longer useful. E.g if there you can't remove anymore rows, hide the collapse button.

On a side note [id$=foapalhtmltable] is a very inefficient selector, you would be much better off using the jQuery class selector (like in my snippet below) or handling ASP.net name mangling of id's and using the 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>

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？

3 个答案: