本文介绍如何使用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样式：
添加基本的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>注意事项
- 确保复选框的name属性与对应列的<td>元素的类名保持一致。
- 可以根据实际需求，修改HTML结构和CSS样式，例如添加更多的列、调整表格样式等。
- 如果需要支持更复杂的交互，例如动态添加/删除列，可以考虑使用JavaScript框架或库，例如React、Vue.js等。
- 在实际应用中，数据可能来自后端，需要通过AJAX等方式获取数据，并动态生成表格。
总结
通过本文的介绍，您已经了解了如何使用HTML、CSS和JavaScript实现根据用户选择动态显示不同尺寸的表格。该方法简单易懂，适用于各种需要在同一页面展示不同数据列的场景。您可以根据实际需求，灵活运用该方法，提升用户体验和页面灵活性。
