使表数据可折叠

Question

我正在尝试使表格的每个标题部分都可折叠。 用户应该能够单击标题并查看表格，然后再次单击以隐藏它。 尽可能简单的东西。 我在这里找到了一些东西： https://www.w3schools.com/howto/howto_js_collapsible.asp对于这样一个简单的东西，这似乎需要很多编码。 HTML有简单的方法吗？ 我在 Thymeleaf 中使用它作为 spring 启动的一部分，所以如果它在 HTML 中完成，它也应该很容易在 Thymeleaf 中使用。 以下是我正在使用的示例 HTML。

<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>

<body>

    <h1> Concepts only in L1</h1>
    <table>
        <tr>
            <th>missing-con</th>
            <th>parent-con</th>
        </tr>
        <tr>
            <td>{missing-con}</td>
            <td>{parent-con}</td>
        </tr>

    </table>
    <h1> Concepts only in M1</h1>
    <table>
        <tr>
            <th>missing-con</th>
            <th>parent-con</th>
        </tr>
        <td>{missing-con}</td>
            <td>{parent-con}</td>
            <td>{missing-con}</td>
            <td>{parent-con}</td>
</table>
</body>

</html>

我希望折叠每张桌子。 有什么建议么？

Answer 1

这是您可以采用自己的方式的一种方法。 我建议您向表元素添加一个 ID/类名称，以便更好地引用它。 在此示例中，我正在考虑文档中的第一个表。 您还可以使用getElementById或getelementByClassName

var table = document.getElementsByTagName("table")[0];
var th = table.getElementsByTagName("th");
for (var i = 0; i < th.length; i++) {
    th[i].onclick = function() {
        var td = this.parentNode.parentNode.getElementsByTagName("td");
        for (var j = 0; j < td.length; j++) {
            if (td[j].style.display == "none") {
                td[j].style.display = "";
            } else {
                td[j].style.display = "none";
            }
        }
    }
}

使表数据可折叠

问题描述

1 个解决方案

解决方案1
0 2022-12-14 13:46:59

使表数据可折叠

问题描述

1 个解决方案

解决方案1 0 2022-12-14 13:46:59

解决方案1
0 2022-12-14 13:46:59