基本上我想创建一个包含两行和四列的表。在第一列中，我希望能够通过下拉列表选择一些内容。一旦选择，与该选择相关联的数据将被输出到表中的其他3列。我是新手，所以请理解。
我用x，y，z显示了我想要显示的数据值。数据将从文本文件中提取。因此，例如，如果我选择玫瑰，那么温度，湿度和湿度将分别显示在x，y，z的位置。
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Select Plant</th>
<th>Temp</th>
<th>Humidity</th>
<th>Moisture</th>
</tr>
<tr>
<td>
<select id="mySelect" onchange="myFunction()">
<option value="daisy">daisy
<option value="tulip">tulip
<option value="rose">rose
<option value="sunflower">sunflower
</select>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
</table>
</body>
</html>
您可以先稍微改进一下HTML：
<select id="mySelect" onchange="myFunction(this)">
<option value="">Select a flower...</option>
<option value="X1,Y1,Z1">daisy</option>
<option value="X2,Y2,Z2">tulip</option>
<option value="X3,Y3,Z3">rose</option>
<option value="X4,Y4,Z4">sunflower</option>
</select>
为了符合HTML标准而关闭标记并添加“this”指针以避免JS函数中的硬编码ID（它允许您为多个元素重用该函数。
添加虚拟第一个元素“选择一个花......”因为onchange不会在页面重新加载时触发，您可能会错过数据表中的初始值。
将文件中的数据放入“value”属性中。请注意，如果文件大小很大，您应该设计一种不同的方法 - 涉及分页等。
在JavaScript中：
function myFunction(element) {
var xyz = element.value;
var flowerName = element.options[element.selectedIndex].innerHTML;
// Parse xyz (in this example in is a string "X,Y,Z"
// Maybe, parse/format flowerName too
document.getElementById("demo").innerHTML = "You selected: " + flowerName ;
document.getElementById("demo-values").innerHTML = "The data: " + xyz;
}
如果您不熟悉这种格式，我建议您将数据放在JSON文件中：https://www.w3schools.com/jS/js_json_intro.asp
在JS中直接获取数据会更容易，dans会在HTML页面上显示它。
在阅读了关于JSON之后，如果不可能告诉我！