使用js实现当我选中不同的单选框时显示不同的表格，但是打开界面时会默认选择第一个按钮显示对应的表格

可以使用以下代码实现：

HTML:

<input type="radio" name="table" value="table1" checked>Table 1
<input type="radio" name="table" value="table2">Table 2
<input type="radio" name="table" value="table3">Table 3

<table id="table1">
  <!-- Table 1 code -->
</table>
<table id="table2" style="display:none;">
  <!-- Table 2 code -->
</table>
<table id="table3" style="display:none;">
  <!-- Table 3 code -->
</table>

JavaScript:

var radios = document.getElementsByName('table');
for (var i = 0, length = radios.length; i < length; i++) {
  radios[i].addEventListener('change', function() {
    var tableId = this.value;
    var table = document.getElementById(tableId);
    var tables = document.getElementsByTagName('table');
    for (var j = 0; j < tables.length; j++) {
      tables[j].style.display = 'none';
    }
    table.style.display = 'table';
  });
}

这里我们首先给每个单选框添加一个 `change` 事件监听器，当用户选择不同的单选框时，我们获取对应的表格的 ID，将所有表格隐藏，然后显示对应的表格。在页面刚加载时，我们将第一个单选框默认选中，所以对应的表格也会被默认显示出来。