文章/答案/技术大牛

发布

社区首页 >问答首页 >隐藏行后如何取消隐藏？

问隐藏行后如何取消隐藏？
EN

Stack Overflow用户

提问于 2019-10-25 02:35:26

回答 1查看 144关注 0票数 1

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

我甚至尝试过遍历表和切换行可见性，但由于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>

scripting

javascript

jquery

html

asp.net

回答 1

Stack Overflow用户

发布于 2019-10-25 03:01:42

更新2

更新了方案，使其以标题行而不是行为目标。

更新1

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

添加了select with same
选择与被选中的输入具有相同值的选项，
如果选中该复选框，将显示有效行，否则将隐藏它们

初始答案

从您的代码中可以明显看出，您正在使用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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58547343

复制

相似问题

问隐藏行后如何取消隐藏？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问隐藏行后如何取消隐藏？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问隐藏行后如何取消隐藏？
EN