В основном я хочу создать таблицу из двух строк и 4 столбцов. В первом столбце я хочу иметь возможность выбрать что-то с раскрывающимся списком. После выбора данные, связанные с этим выбором, будут выведены в остальные 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>