Javascript - 根据封闭的 TD 内容隐藏表格行

Question

我正在编写一个 python 应用程序，它显示学生能力的 HTML 表。我想添加根据这些功能过滤 View 的功能 - 包括同时包含多个过滤器，因此希望在 javascript 中执行此操作(通过数据库查找管理此操作变得很笨拙)。

我有一个具有功能网格(真/假)的表，并且对于每个“假”，我添加了一个类，例如“pupil_web”，并且我编写了一个 javascript 函数，该函数将隐藏该函数行，由每列顶部的按钮触发。

但是我想要的是函数隐藏整行(如果它包含该类的 td)，但我不知道如何做到这一点。我是一名相当基础的 Python 程序员，这是我的第一个规模合理的项目；到目前为止一切进展顺利，但是花了几个小时试图让它工作(并尽可能隐藏 TD，而不是封闭的行)，我希望得到一些帮助或指向正确方向的指针 - 我可以不知道如何让函数查看行的内容，而只是查看每个单独的 TD。

这是 Javascript(请注意，目前我正在使用 Jinja2 创建多个函数，每个函数对应一种功能，其中函数的名称和功能 DIV 内容链接在一起 - 我再次确信我没有以最好的方式做到这一点(为每列创建一个函数)，但目前我宁愿让它以目前的形式工作，然后希望在未来进行优化)。

function toggle_{{ capability }}() {

        var table, td, i;
        table = document.getElementById("myTable");
        td = table.getElementsByClassName("div_{{ capability }}");

        // Loop through all table rows, and hide those who don't match the search query
          for (i = 0; i < td.length; i++) {
            if (td[i].style.display === "none") {
                td[i].style.display = "";
              } else {
                td[i].style.display = "none";
              }
            }
          }

这是 HTML 表格的简单版本(真实的表格大约有 20 列，列条目存在一个类标记，这会导致行被隐藏)。

<tr>
    <td>
        Pupil 1
    </td>
    <td>
        <img class="pupil_web" src="static/cross.png" width="25">
    </td>
    <td>
        <img src="static/tick.png" width="25">    
    </td>
</tr>
<tr>
    <td>
        Pupil 2
    </td>
    <td>
        <img src="/static/tick.png" width="25">
    </td>
    <td>
        <img class="pupil_email" src="static/cross.png" width="25">
    </td>
</tr>

任何正确方向的指示都将不胜感激 - 我还没花这么长时间(我大约用了 4 个月的时间制定了 2 年的自学计划)，但我正在努力学习而不是只是放弃和/或在不理解代码的情况下粘贴代码。

Answer 1

试试这个:

function toggle_{{ capability }}() {
  var table, td, i;
  table = document.getElementById("myTable");
  td = table.getElementsByClassName("div_{{ capability }}");

  // Loop through all table rows, and hide those who don't match the search query
  if (td.parent().style.display === "none") {
    td.parent().style.display = "";
  } else {
    td.parent().style.display = "none";
  }
}
}