使用js实现选中不同单选按钮,显示不同表格
时间: 2023-12-10 09:37:07 浏览: 23
可以使用HTML和JavaScript来实现这个功能。首先,在HTML中创建单选按钮和表格:
```html
<input type="radio" name="table" value="table1"> Table 1
<input type="radio" name="table" value="table2"> Table 2
<table id="table1">
<tr>
<td>Table 1 Row 1 Column 1</td>
<td>Table 1 Row 1 Column 2</td>
</tr>
<tr>
<td>Table 1 Row 2 Column 1</td>
<td>Table 1 Row 2 Column 2</td>
</tr>
</table>
<table id="table2">
<tr>
<td>Table 2 Row 1 Column 1</td>
<td>Table 2 Row 1 Column 2</td>
</tr>
<tr>
<td>Table 2 Row 2 Column 1</td>
<td>Table 2 Row 2 Column 2</td>
</tr>
</table>
```
然后,在JavaScript中,添加事件监听器来跟踪单选按钮的选择,并显示相应的表格:
```javascript
// 获取单选按钮和表格元素
var radioButtons = document.getElementsByName("table");
var tables = document.getElementsByTagName("table");
// 给单选按钮添加事件监听器
for (var i = 0; i < radioButtons.length; i++) {
radioButtons[i].addEventListener("change", function() {
// 隐藏所有表格
for (var j = 0; j < tables.length; j++) {
tables[j].style.display = "none";
}
// 显示选中的表格
var tableId = this.value;
var selectedTable = document.getElementById(tableId);
selectedTable.style.display = "block";
});
}
```
这样,当用户选择不同的单选按钮时,相应的表格就会显示出来。