时间戳

首页 > 解决方案 > 在复选框勾选上隐藏表格行内容

javascript - 在复选框勾选上隐藏表格行内容

问题描述

我目前被困在我的网页上隐藏和显示内容。内容显示服务器在线或离线。由于这个列表很长，我想隐藏所有显示为“LIVE”的服务器，但“DOWN”的部署仍然可见。

勾选该框将隐藏<td>标记中等于“LIVE”的所有内容，但<td>等于“DOWN”的标记仍然可见。

<span class="text-default">
  <input type="checkbox" style="display: none" class="down-checkbox" id="down" checked>
  <label for="down-checkbox">Only show offline servers</label>
</span>

<table>
  <thead>
    <tr>
    <th>No.</th>
    <th>Server</th>
    <th>URL</th>
    <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <?php
      $tests = array(array("test","test.test.test"));
      $i = 1;
      foreach($tests as $test => $testProperties)
      {
        echo "<tr>";
        echo "<td>$i</td>";
        echo "<td>".$testProperties[0]."</td>";
        echo "<td>".$testProperties[1]."</td>";
        if ($socket =@ fsockopen($testProperties[1], 80, $errno, $errstr, 1)) 
        {
          echo "<td><span class='badge badge-success'>LIVE</span></td>";
          fclose($socket);
        }
        else 
        {
          echo "<td><span class='badge badge-danger'>DOWN</span></td>";
        }
        echo "</tr>";
        $i++;
      }
    ?>
  </tbody>
</table>

$("down-checkbox").click(function() {
  $("<td><span class='badge badge-success'>LIVE</span></td>").hide();
});

标签： javascriptphpjqueryhtmlcss

解决方案

你的逻辑有几个问题：

  • $("down-checkbox")不是有效的选择器。您缺少.类选择器的领先优势。
  • 复选框不可见。消除display: none
  • 的for属性label应该引用 的id，input而不是它的class。
  • change在处理复选框时使用事件，而不是click，因为后者存在可访问性问题。
  • 您在 jQuery 选择器中放置一个 HTML 字符串以查找“LIVE”文本。这是不正确的，因为它会创建元素。要搜索元素，请使用有效的选择器。在这种情况下，您可以搜索.badge-success以仅检索活动实例，然后closest()获取其父级tr。
  • hide()再次选中复选框时，将永远不会重新出现该行。一个更好的主意是使用toggle()传递复选框的布尔checked状态以便根据需要隐藏/显示。

$(function() {
  $('.down-checkbox').change(function() {
    $('.badge-danger').closest('tr').toggle(this.checked);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="text-default">
  <input type="checkbox" class="down-checkbox" id="down" checked>
  <label for="down">Only show offline servers</label>
</span>
<table>
  <thead>
    <tr>
      <th>No.</th>
      <th>Server</th>
      <th>URL</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>test</td>
      <td>test.test.test</td>
      <td><span class="badge badge-success">LIVE</span></td>
    </tr>
    <tr>
      <td>2</td>
      <td>test</td>
      <td>test.test.test</td>
      <td><span class="badge badge-danger">DOWN</span></td>
    </tr>
    <tr>
      <td>3</td>
      <td>test</td>
      <td>test.test.test</td>
      <td><span class="badge badge-success">LIVE</span></td>
    </tr>
    <tr>
      <td>4</td>
      <td>test</td>
      <td>test.test.test</td>
      <td><span class="badge badge-danger">DOWN</span></td>
    </tr>
  </tbody>
</table>

推荐阅读