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

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

实现原理

核心思想是利用CSS的display属性控制表格单元格(

详细步骤

1. HTML结构：

   首先，创建包含表格和复选框的HTML结构。表格包含表头()和表体(

   )，每个单元格()都添加一个类名，用于后续的JavaScript操作。复选框用于控制对应列的显示与隐藏，name属性与 的类名保持一致。

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

   
   
   
       
       
       
       
   
   
       
   
           
   
               
   
                   
   Country
                   
   Price
                   
   Date
               
           
           
   
               
   
                   
   USA
                   
   234
                   
   3-9-2022
               
               
   
                   
   France
                   
   234
                   
   3-9-2022
               
               
   
                   
   Algeria
                   
   234
                   
   3-9-2022
               
           
       
   
       
   
           
   What to display:
           
   Show Country: 
           
   Show Price: 
           
   Show Date: 
       
   
   

2. CSS样式：

   

   科威旅游管理系统

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

   下载

   添加基本的CSS样式，例如表格边框、单元格内边距等，使表格更易于阅读。

   table {
       border-collapse: collapse;
   }
   
   td {
       padding: 8px;
       border: 1px solid #777;
   }

3. JavaScript逻辑：

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

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

       完整代码

       
       
       
           
           
           
           
       
       
           
       
               
       
                   
       
                       
       Country
                       
       Price
                       
       Date
                   
               
               
       
                   
       
                       
       USA
                       
       234
                       
       3-9-2022
                   
                   
       
                       
       France
                       
       234
                       
       3-9-2022
                   
                   
       
                       
       Algeria
                       
       234
                       
       3-9-2022
                   
               
           
       
           
       
               
       What to display:
               
       Show Country: 
               
       Show Price: 
               
       Show Date: 
           
       
           
       
       

       注意事项

       • 确保复选框的name属性与对应列的元素的类名保持一致。
       • 可以根据实际需求，修改HTML结构和CSS样式，例如添加更多的列、调整表格样式等。
       • 如果需要支持更复杂的交互，例如动态添加/删除列，可以考虑使用JavaScript框架或库，例如React、Vue.js等。
       • 在实际应用中，数据可能来自后端，需要通过AJAX等方式获取数据，并动态生成表格。

       总结

       通过本文的介绍，您已经了解了如何使用HTML、CSS和JavaScript实现根据用户选择动态显示不同尺寸的表格。该方法简单易懂，适用于各种需要在同一页面展示不同数据列的场景。您可以根据实际需求，灵活运用该方法，提升用户体验和页面灵活性。