在html表格中显示数据可以通过以下步骤实现:
<select id="dropdown">
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
</select>
<table id="data-table">
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</table>
<script>
document.getElementById("dropdown").addEventListener("change", function() {
var selectedOption = this.value;
displayData(selectedOption);
});
function displayData(option) {
var dataTable = document.getElementById("data-table");
// 清空表格中的数据
while (dataTable.rows.length > 1) {
dataTable.deleteRow(1);
}
// 根据选项id显示相应的数据
switch (option) {
case "option1":
// 向表格中添加行和数据
var newRow1 = dataTable.insertRow(1);
var cell1_1 = newRow1.insertCell(0);
cell1_1.innerHTML = "数据1";
var cell1_2 = newRow1.insertCell(1);
cell1_2.innerHTML = "数据2";
var cell1_3 = newRow1.insertCell(2);
cell1_3.innerHTML = "数据3";
break;
case "option2":
// 向表格中添加行和数据
var newRow2 = dataTable.insertRow(1);
var cell2_1 = newRow2.insertCell(0);
cell2_1.innerHTML = "数据4";
var cell2_2 = newRow2.insertCell(1);
cell2_2.innerHTML = "数据5";
var cell2_3 = newRow2.insertCell(2);
cell2_3.innerHTML = "数据6";
break;
case "option3":
// 向表格中添加行和数据
var newRow3 = dataTable.insertRow(1);
var cell3_1 = newRow3.insertCell(0);
cell3_1.innerHTML = "数据7";
var cell3_2 = newRow3.insertCell(1);
cell3_2.innerHTML = "数据8";
var cell3_3 = newRow3.insertCell(2);
cell3_3.innerHTML = "数据9";
break;
default:
break;
}
}
</script>
上述代码中,通过addEventListener函数为下拉列表的change事件添加了一个匿名函数。该函数获取被选中的选项id,并调用displayData函数来显示相应的数据。
displayData函数根据选项id在switch语句中进行判断,并向表格中插入新的行和数据。每次选择新的选项时,都会先清空表格中的数据,然后根据选项id插入相应的数据。
可以根据实际需求修改表格的列数、数据内容和格式。在每个case中,可以通过innerHTML属性设置每个单元格的内容。
这样,当在下拉列表中选择一个选项时,对应的数据就会显示在HTML表格中。
领取专属 10元无门槛券
手把手带您无忧上云