根据select下拉列表实现页面table内容动态变换
时间: 2023-08-31 20:37:08 浏览: 61
可以使用JavaScript监听<select>标签的onchange事件,根据选中的<option>标签的value值,动态改变页面table的内容。
以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态变换页面table内容示例</title>
</head>
<body>
<select id="select-id" onchange="changeTable()">
<option value="1">数据表1</option>
<option value="2">数据表2</option>
<option value="3">数据表3</option>
</select>
<table id="table">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
<tr>
<td>数据4</td>
<td>数据5</td>
<td>数据6</td>
</tr>
</tbody>
</table>
<script>
function changeTable() {
var select = document.getElementById("select-id");
var option = select.options[select.selectedIndex];
var value = option.value;
var table = document.getElementById("table");
switch(value) {
case "1":
table.innerHTML = `
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
<tr>
<td>数据4</td>
<td>数据5</td>
<td>数据6</td>
</tr>
</tbody>
`;
break;
case "2":
table.innerHTML = `
<thead>
<tr>
<th>列A</th>
<th>列B</th>
<th>列C</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据A</td>
<td>数据B</td>
<td>数据C</td>
</tr>
<tr>
<td>数据D</td>
<td>数据E</td>
<td>数据F</td>
</tr>
</tbody>
`;
break;
case "3":
table.innerHTML = `
<thead>
<tr>
<th>列X</th>
<th>列Y</th>
<th>列Z</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据X</td>
<td>数据Y</td>
<td>数据Z</td>
</tr>
<tr>
<td>数据P</td>
<td>数据Q</td>
<td>数据R</td>
</tr>
</tbody>
`;
break;
default:
table.innerHTML = `
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
<tr>
<td>数据4</td>
<td>数据5</td>
<td>数据6</td>
</tr>
</tbody>
`;
}
}
</script>
</body>
</html>
```
在这个示例中,当<select>标签的选中项发生变化时,会调用changeTable()函数。函数中会获取选中的<option>标签的value值,然后根据不同的值,改变id为"table"的<table>标签的innerHTML属性,从而动态改变页面table的内容。