Question

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

我有一个表格，其中包含一个功能网格（真/假），并且每个表格都有一个假的＆＃39;我添加了一个类，例如＆＃39; pupil_web＆＃39;，我编写了一个javascript函数，它将隐藏该行，由每列顶部的按钮触发。

但我想要的是隐藏整行的功能，如果它包含该类的td，我无法解决该怎么做。我是一个相当基础的Python程序员，这是我的第一个任何合理大小的项目;到目前为止它进展顺利，但花了几个小时试图让它工作（并且远远地隐藏TD，而不是封闭的行），我感谢一些帮助或指针正确的方向 - 我无法弄清楚如何让函数看到行的内容，只看每个TD。

这里是Javascript（请注意，目前我使用Jinja2创建多个功能，每个功能，每个功能，功能名称和功能DIV内容链接 - 再次我和＃39;我确定我没有以最好的方式做到这一点（为每一列创建一个功能），但此刻我宁愿让它以现在的形式工作，然后希望在未来优化）。

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表格的简单版本（真正的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>

任何指向正确方向的人都会非常感激 - 我已经没有这么长时间了（我在2年的自学计划中大约有4个月），但我和我试图学习而不是仅仅放弃和/或粘贴代码而不理解它。

Answer 1

试试这个：

function createMarkup() { 
    return <SomeJsxComponentHere />
};
<div dangerouslySetInnerHTML={createMarkup()} />

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

1 个答案: