javascript - 隐藏行后如何取消隐藏它？

标签 javascript jquery html asp.net scripting

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

我什至尝试循环遍历表格并切换行可见性，但由于 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>

最佳答案

更新2

更新了场景以定位标题行而不是行。

<小时/>

更新1

我已使用相关详细信息更新了代码片段，以帮助您找到适合您场景的正确解决方案。

  • Added select with same options
  • Select the Option with same value as the input being checked,
  • If the checkbox is checked it will show the valid rows, otherwise it hides them
<小时/>

初步答复

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

关于javascript - 隐藏行后如何取消隐藏它？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58547343/

上一篇：javascript - 如何取消 Cypress 中的特定请求？

下一篇：javascript - 禁用 div 并仅在选择单选按钮选项时启用

相关文章：

javascript - 如何摆脱 windows.open 的弹出窗口拦截器

javascript - jQuery - 将 JavaScript 附加到 Div

javascript - 动态添加多个输入

javascript - 如何在悬停时停止眨眼

javascript - 将文本保留在选取框内

jQuery : Scroll To - Change the div ID

javascript - jquery 只克隆文本而不是属性不起作用

html - 如何在CSS中使用 Sprite 图像？

javascript - 使用javascript获取相对于监视器的元素位置

javascript - 基于文本的游戏代码不起作用？

©2024 IT工具网  联系我们