使用js实现选中不同的单选按钮显示不同的表格

好的，下面是一种实现方法：

首先，在 HTML 中定义多个单选按钮和对应的表格，可以使用 `id` 属性来标识它们：

<input type="radio" name="table-selector" id="table1-selector">
<label for="table1-selector">表格 1</label>

<input type="radio" name="table-selector" id="table2-selector">
<label for="table2-selector">表格 2</label>

<table id="table1">
  <!-- 表格内容 -->
</table>

<table id="table2">
  <!-- 表格内容 -->
</table>

然后，使用 JavaScript 监听单选按钮的状态变化，根据选中的按钮显示对应的表格。可以使用 `addEventListener` 方法来添加监听器：

// 获取单选按钮和表格的 DOM 元素
const table1Selector = document.getElementById('table1-selector');
const table2Selector = document.getElementById('table2-selector');
const table1 = document.getElementById('table1');
const table2 = document.getElementById('table2');

// 添加状态变化的监听器
table1Selector.addEventListener('change', () => {
  if (table1Selector.checked) {
    table1.style.display = 'table';
    table2.style.display = 'none';
  }
});

table2Selector.addEventListener('change', () => {
  if (table2Selector.checked) {
    table1.style.display = 'none';
    table2.style.display = 'table';
  }
});

在监听器中，判断哪个单选按钮被选中，并显示对应的表格。使用 `style.display` 属性来控制表格的显示或隐藏。如果 `display` 的值为 `'none'`，则表示隐藏表格；如果为 `'table'`，则表示显示表格。

这样，当用户选中不同的单选按钮时，就会显示不同的表格了。