隐藏后如何取消隐藏一行？答案

【问题标题】：How do I unhide a row after it is hidden?隐藏后如何取消隐藏一行？
【发布时间】：2020-02-21 03:30:57
【问题描述】：

以下代码隐藏了表格的第一行，但当再次单击复选框时，它不会使第一行再次可见。有人可以帮忙吗？

我什至尝试循环遍历表格并切换行可见性，但由于 html 中的表格数量，这非常慢。

欢迎提出其他建议。这在 C# 中太痛苦了。

$(document).ready(function() {
  $('#chkNA,#chkSC,#chkNS,#chkIss,#chkIP').click(function() {
    var row;
    if (this.id == 'chkNS') {
      row = $('.TF-StatusNotStarted').closest('tr');
    }
    if (this.id == 'chkSC') {
      row = $('.TF-StatusCompleted').closest('tr');
    }
    if (this.id == 'chkNA') {
      row = $('.TF-StatusNA').closest('tr');
    }
    if (this.id == 'chkIss') {
      row = $('.TF-StatusIssue').closest('tr');
    }
    if (this.id == 'chkIP') {
      row = $('.TF-StatusInProgress').closest('tr');
    }
    
    var tabletest = row.parent().parent();

    row.toggle();

    if (tabletest.find('tbody > tr:gt(0):visible').length > 0) {

      if (tabletest.find('tbody > tr:first').is(":visible") == false) {

        tabletest.find('tbody > tr:first').show();
      }
    }
    
    if (tabletest.find('tbody > tr:gt(0):visible').length > 0 && tabletest.find('tbody > tr:first').is(':visible')) {

      tabletest.find('tbody > tr:first').hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="chkNA" type="checkbox" checked="checked"> N/A <input id="chkSC" type="checkbox" checked="checked"> Completed <input id="chkNS" type="checkbox" checked="checked"> Not Started <input id="chkIss" type="checkbox" checked="checked"> Issue
<input
  id="chkIP" type="checkbox" checked="checked"> In Progress

  <table class="taskform">
    <tr>
      <td>
        <table class="TF-TaskGroupTable" id="first table" border="1">
          <tbody>
            <tr>
              <th colspan=3>
                First Table
              </th>
            </tr>
            <tr>
              <td>
                <select class="TF-StatusCompleted">
                  <option value="Not Started">Not Started</option>
                  <option value="In Progress">In Progress</option>
                  <option selected="selected" value="Completed">Completed</option>
                  <option value="Issue">Issue</option>
                  <option value="N/A">N/A</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>
                <select class="TF-StatusCompleted">
                  <option value="Not Started">Not Started</option>
                  <option value="In Progress">In Progress</option>
                  <option selected="selected" value="Completed">Completed</option>
                  <option value="Issue">Issue</option>
                  <option value="N/A">N/A</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>
                <select class="TF-StatusCompleted">
                  <option value="Not Started">Not Started</option>
                  <option value="In Progress">In Progress</option>
                  <option selected="selected" value="Completed">Completed</option>
                  <option value="Issue">Issue</option>
                  <option value="N/A">N/A</option>
                </select>
              </td>
            </tr>
          </tbody>
        </table>
        <div>

          <input type="button" />
        </div>
        <table class="TF-TaskGroupTable" id="Second Table" border="1">
          <tbody>
            <tr>
              <th colspan=3>
                Second Table
              </th>
            </tr>
            <tr>
              <td>
                <select class="TF-StatusNA">
                  <option value="Not Started">Not Started</option>
                  <option value="In Progress">In Progress</option>
                  <option value="Completed">Completed</option>
                  <option value="Issue">Issue</option>
                  <option selected="selected" value="N/A">N/A</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>
                <select class="TF-StatusCompleted">
                  <option value="Not Started">Not Started</option>
                  <option value="In Progress">In Progress</option>
                  <option selected="selected" value="Completed">Completed</option>
                  <option value="Issue">Issue</option>
                  <option value="N/A">N/A</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>
                <select class="TF-StatusNA">
                  <option value="Not Started">Not Started</option>
                  <option value="In Progress">In Progress</option>
                  <option value="Completed">Completed</option>
                  <option value="Issue">Issue</option>
                  <option selected="selected" value="N/A">N/A</option>
                </select>
              </td>
            </tr>
          </tbody>
        </table>
        <div>

          <input type="button" />
        </div>
        <table class="TF-TaskGroupTable" id="Third Table" border="1">
          <tbody>
            <tr>
              <th colspan=3>
                Third Table
              </th>
            </tr>
            <tr>
              <td>
                <select class="TF-StatusNA">
                  <option value="Not Started">Not Started</option>
                  <option value="In Progress">In Progress</option>
                  <option value="Completed">Completed</option>
                  <option value="Issue">Issue</option>
                  <option selected="selected" value="N/A">N/A</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>
                <select class="TF-StatusNA">
                  <option value="Not Started">Not Started</option>
                  <option value="In Progress">In Progress</option>
                  <option value="Completed">Completed</option>
                  <option value="Issue">Issue</option>
                  <option selected="selected" value="N/A">N/A</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>
                <select class="TF-StatusNA">
                  <option value="Not Started">Not Started</option>
                  <option value="In Progress">In Progress</option>
                  <option value="Completed">Completed</option>
                  <option value="Issue">Issue</option>
                  <option selected="selected" value="N/A">N/A</option>
                </select>
              </td>
            </tr>
          </tbody>
        </table>
        <div>

          <input type="button" />
        </div>
      </td>
    </tr>
  </table>

【问题讨论】：

使用 .hidden { display: none; } 类，然后只需打开和关闭元素的类。
可以分享一下html代码吗？
HTML 是动态的，所以无法添加类。
@user12125713 这篇文章可以受益于 HTML/CSS/JS Snippet 功能。而不是代码块。因为它提供了一个沙箱来演示您的代码，而不仅仅是显示它。带有 html 标签的文档的编辑器图标。

标签： javascript jquery html asp.net scripting

【解决方案1】：

更新 2

更新了场景以针对标题行而不是行。

更新 1

我已经用相关细节更新了代码 sn-p，以帮助您为您的场景找到合适的解决方案。

添加了具有相同选项的选择

选择与正在检查的输入具有相同值的选项，

如果选中该复选框，它将显示有效行，否则将隐藏它们

初步答案

从您的代码中可以明显看出您正在使用 jQuery 来显示/隐藏行。 jQuery 有 3 个执行此行为的函数。明显的show() 和hide()，以及不太明显的toggle()。如果您的意图是“切换”元素的可见性，则应使用toggle()，否则您必须自己跟踪元素的状态。

以下是这些方法的一些参考资料，可以帮助您。

这里有一个简单的例子来帮助你。

$(function() {

  function showSelected() {
    var selected = [];
    $('input:checked')
      .map(function(idx, elm) {
        selected.push($(elm).val());
      });

    $('#report').text(JSON.stringify(selected));
  }


  $('input').click(function(event) {
    // update the selected report
    showSelected();

    // get the value of this element
    var value = $(this).val();

    // options that have this value and are checked
    var selector = `option[value="${value}"]:checked`;

    if ($(this).is(':checked')) {
      $(selector).closest('table').find('thead tr').show()
    } else {
      $(selector).closest('table').find('thead tr').hide()
    }
  });

  showSelected();
  $('input').click();

});

tbody td {
  width: 150px
}

tbody tr.even {
  background-color: cyan;
}

tbody tr.odd {
  background-color: lime;
}

#report {
  width: 80%;
  padding: 4px;
  background-color: lightgray;
  border: 1px solid black;
  min-height: 2rem;
}

thead tr {
  background-color: cornflowerblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" value="Not Started"> Not Started
<input type="checkbox" value="In Progress"> In Progress
<table>
  <tbody>
    <tr class="odd">
      <td>R1 C1</td>
      <td>R1 C2</td>
      <td>R1 C3</td>
      <td>
        <select>
          <option value="Not Started">Not Started</option>
          <option value="In Progress">In Progress</option>
          <option value="Completed">Completed</option>
          <option value="Issue">Issue</option>
          <option value="N/A">N/A</option>
        </select>
      </td>
    </tr>
    <tr class="even">
      <td>R2 C1</td>
      <td>R2 C2</td>
      <td>R2 C3</td>
      <td>
        <select>
          <option value="Not Started">Not Started</option>
          <option value="In Progress" selected>In Progress</option>
          <option value="Completed">Completed</option>
          <option value="Issue">Issue</option>
          <option value="N/A">N/A</option>
        </select>
      </td>
    </tr>
    <tr class="odd">
      <td>R3 C1</td>
      <td>R3 C2</td>
      <td>R3 C3</td>
      <td>
        <select>
          <option value="Not Started">Not Started</option>
          <option value="In Progress">In Progress</option>
          <option value="Completed">Completed</option>
          <option value="Issue">Issue</option>
          <option value="N/A">N/A</option>
        </select>
      </td>
    </tr>
  </tbody>
  <thead>
    <tr>
      <td colspan="4">
        This is a table header row
      </td>
    </tr>
  </thead>
</table>
<pre id="report">
</pre>

【讨论】：

我试过切换，但它也不起作用。这是我想要做的。如果表中剩余可见行的计数为零，则隐藏第一行（使用 TR 而不是 thead 的标题）。如果在第一行之后甚至单行可见，则第一行设置为可见。我已经在对除第一行之外的所有行使用切换。
您能在此处添加您想要实现的目标吗？ toggle() 将始终有效，显示/隐藏可以更快地分解，因为除了跟踪 html 状态之外，它们还需要单独的选择器才能正常工作。您对:visible 的检查没有按照您的预期发挥作用，因为直接在正在操作的元素上添加/删除display:none 样式并且不会影响:visible。
例如，如果我取消选中“已完成”复选框，则应隐藏包含所选下拉选项“已完成”的所有行。仅当该表的所有行都包含“已完成”作为选定的下拉选项时，才应隐藏第一行（标题）。如果我再次选中“已完成”复选框，则所有包含所选下拉选项“已完成”的行都应该可见。只有当该表的所有行都包含“已完成”作为选定的下拉选项时，第一行（标题）才应该可见。
我更新了我的答案，提供了更多相关的细节，因为我对你的尝试有了更好的了解。
谢谢，但我的代码已经这样做了。我希望标题根据表格行的可见性计数进行切换。