使表數據可折疊

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