如何在 html css js 中多次折叠行

问题描述 投票：0回答：1

实现： 多次冻结标题、冻结第一列并折叠行。

已实现：冻结标题，冻结第一列并仅折叠一次。

到目前为止我的代码：

</head>
<body>
<div class="table-container">
<table>
<thead class="freeze-header">
<tr>
<th class="freeze-col">Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr class="parent-row">
<td class="freeze-col"><i class="fas fa-caret-right collapse-icon"></i> Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr class="collapse">
<td colspan="3">
<table>
<tbody>
<tr class="parent-row">
<td class="freeze-col"><i class="fas fa-caret-right collapse-icon"></i> Row 1.1, Column 1</td>
<td>Row 1.1, Column 2</td>
</tr>
<tr class="collapse">
<td colspan="3">
<table><tbody><tr>
<td>Row 1.1.1, Column 1</td>
<td>Row 1.1.1, Column 2</td>
</tr></tbody></table></td></tr></tbody></table></td></tr>
<tr class="parent-row">
<td class="freeze-col"><i class="fas fa-caret-right collapse-icon"></i> Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody></table></div>

<script>
    // JavaScript to handle collapse functionality
    document.querySelectorAll('.parent-row').forEach(function(row) {
        row.addEventListener('click', function() {
            var nextRow = row.nextElementSibling;
            if (nextRow && nextRow.classList.contains('collapse')) {
                nextRow.classList.toggle('show');
                row.querySelector('.collapse-icon').classList.toggle('fa-caret-right');
                row.querySelector('.collapse-icon').classList.toggle('fa-caret-down');
            }
        });
    });
</script>

如何实现与下图相同的效果？谢谢。 布局实现

javascript html css
1个回答
0
投票

要实现冻结表头、冻结第一列以及折叠表中的多行，您可以稍微修改现有代码。这是包含以下功能的更新版本：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        .table-container {
            overflow-x: auto;
            max-width: 100%;
            position: relative;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th.freeze-col, td.freeze-col {
            position: sticky;
            left: 0;
            background-color: #f2f2f2;
        }

        .freeze-header th {
            position: sticky;
            top: 0;
            background-color: #f2f2f2;
        }

        .collapse {
            display: none;
        }

        .collapse.show {
            display: table-row;
        }

        .collapse td {
            padding-left: 30px;
        }

        .collapse .freeze-col {
            position: static;
            background-color: #fff;
        }

        .collapse-icon {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table>
            <thead class="freeze-header">
                <tr>
                    <th class="freeze-col">Header 1</th>
                    <th>Header 2</th>
                    <th>Header 3</th>
                </tr>
            </thead>
            <tbody>
                <tr class="parent-row">
                    <td class="freeze-col"><i class="fas fa-caret-right collapse-icon"></i> Row 1, Column 1</td>
                    <td>Row 1, Column 2</td>
                    <td>Row 1, Column 3</td>
                </tr>
                <tr class="collapse">
                    <td colspan="3">
                        <table>
                            <tbody>
                                <tr class="parent-row">
                                    <td class="freeze-col"><i class="fas fa-caret-right collapse-icon"></i> Row 1.1, Column 1</td>
                                    <td>Row 1.1, Column 2</td>
                                    <td>Row 1.1, Column 3</td>
                                </tr>
                                <tr class="collapse">
                                    <td colspan="3">
                                        <table>
                                            <tbody>
                                                <tr>
                                                    <td>Row 1.1.1, Column 1</td>
                                                    <td>Row 1.1.1, Column 2</td>
                                                    <td>Row 1.1.1, Column 3</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr class="parent-row">
                    <td class="freeze-col"><i class="fas fa-caret-right collapse-icon"></i> Row 2, Column 1</td>
                    <td>Row 2, Column 2</td>
                    <td>Row 2, Column 3</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        document.querySelectorAll('.parent-row').forEach(function(row) {
            row.addEventListener('click', function() {
                var nextRow = row.nextElementSibling;
                if (nextRow && nextRow.classList.contains('collapse')) {
                    nextRow.classList.toggle('show');
                    row.querySelector('.collapse-icon').classList.toggle('fa-caret-right');
                    row.querySelector('.collapse-icon').classList.toggle('fa-caret-down');
                }
            });
        });
    </script>
</body>
</html>

在此更新的代码中，我添加了 CSS 样式来冻结第一列和标题，并处理折叠的行。处理折叠功能的 JavaScript 函数保持不变。您可以进一步自定义样式以满足您的设计要求。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.