时间戳

首页 > 解决方案 > 使用超链接仅显示某些表格行

javascript - 使用超链接仅显示某些表格行

问题描述

我正在尝试这样做，以便在选中复选框时仅显示某些表格行。

我一直在寻找如何制作它的几个小时，所以如果我检查“Mannen”，它只会显示桌子上的男人并隐藏其余的人。在“艾伦”的情况下，我希望它在检查时显示给所有人。

问题 1：如何内联阻止复选框和文本而不是在彼此下方？我试过通过 CSS 来做，但没有让它工作。（似乎对于 JSfiddle 它可以工作并且它是内联的，但在我的本地服务器上并非如此）

问题 2：我一直试图让它与这个 JS 代码一起工作，但我是一个初学者，所以不确定这是否是我尝试过的正确方法，当我选中一个框时它没有做任何事情。

JS代码

$('input[type="checkbox"]').on('click', function() {
    var targetClass = $(this).data('target-class');
    var $rows = $('tr.' + targetClass);
    if($(this).is(':checked')) {
        $rows.show();
    } else {
        $rows.hide();
    }
});

代码

<!doctype html>
<html lang="nl">

<head>
    <script src="Geslachten.js" defer></script>
    <title>Geslachten</title>
    <link rel="icon" href="javascript.ico" type="image/x-icon">
    <link rel="stylesheet" href="default.css">
</head>

<body>
  <div class="Checkboxes">
    <label class="checkbox-inline">
      <input type="checkbox" data-target-class="mannen" value=""> Mannen
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" data-target-class="Vrouwen" value=""> Vrouwen
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" data-target-class="Allen" value=""> Allen
    </label>
  </div>

    <table >
        <tr>
          <th>Voornaam</th>
          <th>Familienaam</th>
          <th>Geslacht</th>
          <th>Foto</th>
        </tr>
        <tr class="Mannen Allen">
          <td>Noah</td>
          <td>Smith</td>
          <td><img src="man.png" alt=""</img></td>
          <td><img src="man1.jpg" alt=""</img></td>
        </tr>
        <tr class="Vrouwen Allen">
          <td>Emma</td>
          <td>Johnson</td>
          <td><img src="vrouw.png" alt=""</img></td>
          <td><img src="vrouw1.jpg" alt=""</img></td>
        </tr>
        <tr class="Vrouwen Allen">
            <td>Sophia</td>
            <td>Wilson</td>
            <td><img src="vrouw.png" alt=""</img></td>
            <td><img src="vrouw2.jpg" alt=""</img></td>
          </tr>
          <tr class="Mannen Allen">
            <td>Mason</td>
            <td>Jones</td>
            <td><img src="man.png" alt=""</img></td>
            <td><img src="man2.jpg" alt=""</img></td>
          </tr>
          <tr class="Mannen Allen">
            <td>William</td>
            <td>Davis</td>
            <td><img src="man.png" alt=""</img></td>
            <td><img src="man3.jpg" alt=""</img></td>
          </tr>
          <tr class="Mannen Allen">
            <td>Liam</td>
            <td>Williams</td>
            <td><img src="man.png" alt=""</img></td>
            <td><img src="man4.jpg" alt=""</img></td>
          </tr>
          <tr class="Vrouwen Allen">
            <td>Olivia</td>
            <td>Miller</td>
            <td><img src="vrouw.png" alt=""</img></td>
            <td><img src="vrouw3.jpg" alt=""</img></td>
          </tr>
          <tr class="Mannen Allen">
            <td>Jacob</td>
            <td>Brown</td>
            <td><img src="man.png" alt=""</img></td>
            <td><img src="man5.jpg" alt=""</img></td>
          </tr>
          <tr class="Vrouwen Allen">
            <td>Ava</td>
            <td>Moore</td>
            <td><img src="vrouw.png" alt=""</img></td>
            <td><img src="vrouw4.jpg" alt=""</img></td>
          </tr>
          <tr class="Vrouwen Allen">
            <td>Isabella</td>
            <td>Taylor</td>
            <td><img src="vrouw.png" alt=""</img></td>
            <td><img src="vrouw5.jpg" alt=""</img></td>
          </tr>
      </table>


</body>

</html>

Jsfiddle 链接 --> https://jsfiddle.net/uvhwy32q/

标签： javascripthtml

解决方案

我的回答使用纯 CSS 解决方案。但是，这将需要您稍微更改原始 HTML：

  • 让你table的孩子<div class="Checkboxes"
  • 将元素放在元素<input>之外<label>

这样就<input>成为<table>里面的直接邻居（兄弟姐妹）.Checkboxes

  • 重命名为现在也像孩子.Checkboxes一样的东西。这不是必需的，但更有意义。.gender-select<table>

现在，~当您的复选框为:checked.

通用 CSS：

.sibling-selector { display: none } [attribute-selector]:checked ~ table .sibling-selector { display: table-row }

类.allen实际上变得多余，但可以用于其他目的。

供参考

  • 使用所有小写字母是常见的做法.classnames
  • <img>没有</img>结束标记，这是您的代码中的错误。
  • 复选框是inline-block默认的

查看片段

.vrouwen, .mannen { display: none }

[data-target-class="allen"  ]:checked ~ table .vrouwen,
[data-target-class="allen"  ]:checked ~ table .mannen,
[data-target-class="vrouwen"]:checked ~ table .vrouwen,
[data-target-class="mannen" ]:checked ~ table .mannen { display: table-row }
    <div class="gender-select">
        <label class="checkbox-inline">Mannen </label> <input type="checkbox" data-target-class="mannen" >
        <label class="checkbox-inline">Vrouwen</label> <input type="checkbox" data-target-class="vrouwen">
        <label class="checkbox-inline">Allen  </label> <input type="checkbox" data-target-class="allen"  >

        <table>
            <tr>
                <th>Voornaam</th>
                <th>Familienaam</th>
                <th>Geslacht</th>
                <th>Foto</th>
            </tr>

            <tr class="mannen allen">
                <td>Noah</td>
                <td>Smith</td>
                <td><img src="man.png" alt=""></td>
                <td><img src="man1.jpg" alt=""></td>
            </tr>
            <tr class="vrouwen allen">
                <td>Emma</td>
                <td>Johnson</td>
                <td><img src="vrouw.png" alt=""></td>
                <td><img src="vrouw1.jpg" alt=""></td>
            </tr>
            <tr class="vrouwen allen">
                <td>Sophia</td>
                <td>Wilson</td>
                <td><img src="vrouw.png" alt=""></td>
                <td><img src="vrouw2.jpg" alt=""></td>
            </tr>
            <tr class="mannen allen">
                <td>Mason</td>
                <td>Jones</td>
                <td><img src="man.png" alt=""></td>
                <td><img src="man2.jpg" alt=""></td>
            </tr>
            <tr class="mannen allen">
                <td>William</td>
                <td>Davis</td>
                <td><img src="man.png" alt=""></td>
                <td><img src="man3.jpg" alt=""></td>
            </tr>
            <tr class="mannen allen">
                <td>Liam</td>
                <td>Williams</td>
                <td><img src="man.png" alt=""></td>
                <td><img src="man4.jpg" alt=""></td>
            </tr>
            <tr class="vrouwen allen">
                <td>Olivia</td>
                <td>Miller</td>
                <td><img src="vrouw.png" alt=""></td>
                <td><img src="vrouw3.jpg" alt=""></td>
            </tr>
            <tr class="mannen allen">
                <td>Jacob</td>
                <td>Brown</td>
                <td><img src="man.png" alt=""></td>
                <td><img src="man5.jpg" alt=""></td>
            </tr>
            <tr class="vrouwen allen">
                <td>Ava</td>
                <td>Moore</td>
                <td><img src="vrouw.png" alt=""></td>
                <td><img src="vrouw4.jpg" alt=""></td>
            </tr>
            <tr class="vrouwen allen">
                <td>Isabella</td>
                <td>Taylor</td>
                <td><img src="vrouw.png" alt=""></td>
                <td><img src="vrouw5.jpg" alt=""></td>
            </tr>
        </table>
    </div>

推荐阅读