使用 JavaScript 切换 Radio Button 改变表格样式_技术教程

本文介绍了如何使用 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 结构。


    Prüfung im Rahmen einer

    
        Störungsbehebung
        
    

    
        Hauptprüfung
        
    







    In Ordnung

    
        
            
                Header 1
                Header 2
            
            
                Data 1
                Data 2
            
        
    

    
        
            
                Header A
                Header B
            
            
                Data A
                Data B

Header 1	Header 2
Data 1	Data 2

Header A	Header B
Data A	Data B

注意：

每个 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 的选择动态改变表格的显示样式。这种方法可以应用于各种场景，例如根据用户选择显示不同的数据表格，或者根据用户角色显示不同的权限设置界面。