使表数据可折叠

Question

I am trying to make each heading part which is a table collapsible.我正在尝试使表格的每个标题部分都可折叠。 The user should be able to click on the heading and view the table and click again to hide it.用户应该能够单击标题并查看表格，然后再次单击以隐藏它。 Something as simple as possible.尽可能简单的东西。 I found something here: https://www.w3schools.com/howto/howto_js_collapsible.asp that seems like a lot of coding for such a simple thing.我在这里找到了一些东西： https://www.w3schools.com/howto/howto_js_collapsible.asp对于这样一个简单的东西，这似乎需要很多编码。 Is there a simple way to do it in HTML? HTML有简单的方法吗？ I am using it in Thymeleaf as part of spring boot, so if it's done in HTML it should be easily doable in Thymeleaf too.我在 Thymeleaf 中使用它作为 spring 启动的一部分，所以如果它在 HTML 中完成，它也应该很容易在 Thymeleaf 中使用。 Following is the sample HTML that I am using.以下是我正在使用的示例 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>

And I am looking to collapse each table.我希望折叠每张桌子。 Any suggestions?有什么建议么？

Answer 1

Here is one aproach you can addapt your way.这是您可以采用自己的方式的一种方法。 I would advise you to add an ID/class name to the table element so you can reference it better.我建议您向表元素添加一个 ID/类名称，以便更好地引用它。 In this example I'm considering the first table on the document.在此示例中，我正在考虑文档中的第一个表。 You can also use getElementById or getelementByClassName您还可以使用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