根据用户选择动态显示不同尺寸的HTML表格-html教程-PHP中文网

根据用户选择动态显示不同尺寸的HTML表格

花韻仙語

发布： 2025-09-17 20:36:01

原创

909人浏览过

根据用户选择动态显示不同尺寸的html表格

本文介绍如何使用HTML、CSS和JavaScript实现根据用户选择动态显示不同尺寸的表格。通过复选框控制表格列的显示与隐藏，从而达到切换表格尺寸的目的。该方法适用于需要在同一页面展示不同数据列的场景，提升用户体验和页面灵活性。

实现原理

核心思想是利用CSS的display属性控制表格单元格(<td>)的显示与隐藏。通过JavaScript监听复选框的change事件，当复选框状态改变时，动态修改对应列的<td>元素的display属性。

详细步骤

HTML结构：

首先，创建包含表格和复选框的HTML结构。表格包含表头(<thead>)和表体(<tbody>)，每个单元格(<td>)都添加一个类名，用于后续的JavaScript操作。复选框用于控制对应列的显示与隐藏，name属性与<td>的类名保持一致。

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Table</title>
    <style>
        table {
            border-collapse: collapse;
        }

        td {
            padding: 8px;
            border: 1px solid #777;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td class="country">Country</td>
                <td class="price">Price</td>
                <td class="date">Date</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="country">USA</td>
                <td class="price">234</td>
                <td class="date">3-9-2022</td>
            </tr>
            <tr>
                <td class="country">France</td>
                <td class="price">234</td>
                <td class="date">3-9-2022</td>
            </tr>
            <tr>
                <td class="country">Algeria</td>
                <td class="price">234</td>
                <td class="date">3-9-2022</td>
            </tr>
        </tbody>
    </table>

    <div>
        <h5>What to display:</h5>
        <div><label>Show Country: <input checked type="checkbox" name="country" id="country"></label></div>
        <div><label>Show Price: <input checked type="checkbox" name="price" id="price"></label></div>
        <div><label>Show Date: <input checked type="checkbox" name="date" id="date"></label></div>
    </div>
</body>
</html>

登录后复制

CSS样式：

科威旅游管理系统源码
系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。

150

查看详情

添加基本的CSS样式，例如表格边框、单元格内边距等，使表格更易于阅读。
```
table {
    border-collapse: collapse;
}

td {
    padding: 8px;
    border: 1px solid #777;
}
```
登录后复制

JavaScript逻辑：

使用JavaScript获取所有复选框元素，并为每个复选框添加change事件监听器。当复选框状态改变时，根据其checked属性的值，动态修改对应列的<td>元素的display属性。

const inputs = document.querySelectorAll("input");

inputs.forEach(e => {
    e.onchange = ({ target: { checked, name } }) => {
        document.querySelectorAll(`td.${name}`).forEach(e => {
            e.style.display = checked ? "table-cell" : "none";
        });
    };
});

登录后复制

代码解释：

document.querySelectorAll("input"): 获取页面中所有<input>元素。
inputs.forEach(e => ...): 遍历所有复选框。
e.onchange = ({ target: { checked, name } }) => ...: 为每个复选框添加change事件监听器。
- checked: 复选框的选中状态（true表示选中，false表示未选中）。
- name: 复选框的name属性值，与<td>元素的类名对应。
document.querySelectorAll(\td.\${name}`): 获取所有类名为name的`元素。
e.style.display = checked ? "table-cell" : "none": 根据复选框的选中状态，设置<td>元素的display属性。如果选中，则显示(table-cell)；否则，隐藏(none)。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Table</title>
    <style>
        table {
            border-collapse: collapse;
        }

        td {
            padding: 8px;
            border: 1px solid #777;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td class="country">Country</td>
                <td class="price">Price</td>
                <td class="date">Date</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="country">USA</td>
                <td class="price">234</td>
                <td class="date">3-9-2022</td>
            </tr>
            <tr>
                <td class="country">France</td>
                <td class="price">234</td>
                <td class="date">3-9-2022</td>
            </tr>
            <tr>
                <td class="country">Algeria</td>
                <td class="price">234</td>
                <td class="date">3-9-2022</td>
            </tr>
        </tbody>
    </table>

    <div>
        <h5>What to display:</h5>
        <div><label>Show Country: <input checked type="checkbox" name="country" id="country"></label></div>
        <div><label>Show Price: <input checked type="checkbox" name="price" id="price"></label></div>
        <div><label>Show Date: <input checked type="checkbox" name="date" id="date"></label></div>
    </div>

    <script>
        const inputs = document.querySelectorAll("input");

        inputs.forEach(e => {
            e.onchange = ({ target: { checked, name } }) => {
                document.querySelectorAll(`td.${name}`).forEach(e => {
                    e.style.display = checked ? "table-cell" : "none";
                });
            };
        });
    </script>
</body>
</html>

登录后复制