使用css/js实现在一个页面里的表格数据切换

原创严少安 2023-09-27

330

要在一个页面里实现表格数据的切换，你可以使用 CSS 和 JavaScript 来达到目标效果。以下是一个简单的示例来说明如何使用 CSS 和 JavaScript 来切换表格数据。

首先，我们创建一个HTML页面，里面包含两个表格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Switcher</title>
    <style>
        /* 使用 CSS 来控制表格的显示和隐藏 */
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <button id="switchButton">切换表格</button>
    <table id="table1" class="hidden">
        <tr>
            <th>表1 - 列1</th>
            <th>表1 - 列2</th>
        </tr>
        <tr>
            <td>数据1</td>
            <td>数据2</td>
        </tr>
    </table>
    <table id="table2">
        <tr>
            <th>表2 - 列1</th>
            <th>表2 - 列2</th>
        </tr>
        <tr>
            <td>数据3</td>
            <td>数据4</td>
        </tr>
    </table>
    <script>
        // 使用 JavaScript 来切换表格的显示和隐藏
        document.getElementById('switchButton').addEventListener('click', function() {
            var table1 = document.getElementById('table1');
            var table2 = document.getElementById('table2');
            if (table1.classList.contains('hidden')) {
                table1.classList.remove('hidden');
                table2.classList.add('hidden');
            } else {
                table1.classList.add('hidden');
                table2.classList.remove('hidden');
            }
        });
    </script>
</body>
</html>

这个示例包含两个表格，并且每个表格都被赋予了一个CSS类名 hidden，用于控制它们的显示和隐藏。通过点击按钮，JavaScript 代码会切换这两个表格的显示和隐藏状态。当你首次加载这个页面时，第一个表格是隐藏的，第二个表格是可见的。当你点击按钮时，它们的状态将会切换。

你可以根据你的需求对这个示例进行扩展，例如添加更多的表格或者更复杂的交互效果。

「喜欢这篇文章，您的关注和赞赏是给作者最好的鼓励」

关注作者

使用css/js实现在一个页面里的表格数据切换

评论