使用js实现当我选中不同的单选框时显示不同的表格

好的，你需要先在HTML中创建单选框和表格，然后使用JavaScript来控制它们的显示和隐藏。以下是一个简单的实现示例：

HTML代码：

<input type="radio" name="table-type" value="table1">表格1
<input type="radio" name="table-type" value="table2">表格2

<table id="table1">
    <thead>
        <tr>
            <th>表格1头部</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>表格1内容</td>
        </tr>
    </tbody>
</table>

<table id="table2">
    <thead>
        <tr>
            <th>表格2头部</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>表格2内容</td>
        </tr>
    </tbody>
</table>

JavaScript代码：

// 获取单选框和表格元素
const radios = document.getElementsByName('table-type')
const table1 = document.getElementById('table1')
const table2 = document.getElementById('table2')

// 添加单选框的事件监听器
for (let i = 0; i < radios.length; i++) {
    radios[i].addEventListener('change', function() {
        // 隐藏所有表格
        table1.style.display = 'none'
        table2.style.display = 'none'
        
        // 根据选中的单选框显示对应的表格
        if (radios[0].checked) {
            table1.style.display = 'table'
        } else if (radios[1].checked) {
            table2.style.display = 'table'
        }
    })
}

以上代码会在页面加载时隐藏所有表格，然后当你选中单选框时，会根据选中的值显示对应的表格。你可以根据自己的需要修改表格和单选框的样式。