本文介绍了如何使用 JavaScript 根据选中的 Radio Button 动态改变表格的显示样式。核心在于通过监听 Radio Button 的 `onchange` 事件，修改表格的 `display` 属性，从而实现表格的显示与隐藏。同时，需要注意 HTML 元素 ID 的正确使用，确保 JavaScript 代码能够准确操作目标元素。
实现原理
通过监听 HTML 中 Radio Button 的 onchange 事件，当用户切换 Radio Button 的选择时，触发相应的 JavaScript 函数。该函数根据选中的 Radio Button 的 value 值，控制不同表格的 display 属性，从而达到切换表格样式的目的。
具体实现
以下是一个完整的示例，展示如何通过 Radio Button 的切换，控制两个表格的显示与隐藏。
HTML 结构
首先，我们需要定义 Radio Button 和表格的 HTML 结构。
立即学习“Java免费学习笔记（深入）”；
<fieldset id="uberpruefung">
<legend style="font-weight: bold">Prüfung im Rahmen einer</legend>
<div>
<label for="stoerungbeh">Störungsbehebung</label>
<input type="radio" id="stoerungbeh" name="pruefung" value="stoerungsbehebung" onchange="changeStylePruefung(this)" checked>
</div>
<div>
<label for="hauptpruefung">Hauptprüfung</label>
<input type="radio" id="hauptpruefung" name="pruefung" value="hauptpruefung" onchange="changeStylePruefung(this)">
</div>
</fieldset>
<br><br>
<fieldset>
<legend style="font-weight: bold">In Ordnung</legend>
<div id='table-haupt' style="display: none">
<table class='rg-table' summary='Hed'>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</div>
<div id='table-stoerung' style="display: block">
<table class='rg-table-stoerung' summary='Hed'>
<tr>
<th>Header A</th>
<th>Header B</th>
</tr>
<tr>
<td>Data A</td>
<td>Data B</td>
</tr>
</table>
</div>
</fieldset>注意：
- 每个 Radio Button 都有一个唯一的 id 和相同的 name 属性，name 属性用于将它们组合成一个单选按钮组。
- onchange 事件绑定了 changeStylePruefung 函数，并在事件触发时将当前 Radio Button 对象传递给该函数。
- 表格被包裹在 div 元素中，并赋予了唯一的 id，例如 table-haupt 和 table-stoerung。初始状态下，table-stoerung 显示，table-haupt 隐藏。
- 这里将class属性修改为id属性。
JavaScript 代码
接下来，我们需要编写 JavaScript 代码来实现表格样式的切换。
function changeStylePruefung(radiobutton) {
if (radiobutton.value === "stoerungsbehebung") {
document.getElementById("table-stoerung").style.display = "block";
document.getElementById("table-haupt").style.display = "none";
} else {
document.getElementById("table-stoerung").style.display = "none";
document.getElementById("table-haupt").style.display = "block";
}
}代码解释：
- changeStylePruefung 函数接收一个 Radio Button 对象作为参数。
- 根据 Radio Button 的 value 值判断当前选中的是哪个选项。
- 使用 document.getElementById 方法获取表格对应的 div 元素。
- 修改 div 元素的 style.display 属性，控制表格的显示与隐藏。block 表示显示，none 表示隐藏。
总结与注意事项
- ID 的重要性： 确保 HTML 元素具有唯一的 id 属性，并且 JavaScript 代码中使用 document.getElementById 方法正确获取这些元素。 错误的ID会导致JavaScript无法找到对应的HTML元素，从而导致代码无法正常工作。
- display 属性： display 属性是控制 HTML 元素显示与隐藏的关键。display: block 使元素显示为块级元素，display: none 使元素隐藏。
- 代码可维护性： 在实际项目中，可以将表格的显示与隐藏逻辑封装成单独的函数，提高代码的可读性和可维护性。
- CSS 样式： 可以使用 CSS 类来定义表格的样式，并在 JavaScript 中通过修改元素的 className 属性来切换样式，而不是直接修改 style 属性。 这可以使代码更加简洁，也更易于维护。
通过以上步骤，我们可以轻松地使用 JavaScript 根据 Radio Button 的选择动态改变表格的显示样式。 这种方法可以应用于各种场景，例如根据用户选择显示不同的数据表格，或者根据用户角色显示不同的权限设置界面。
