Would like to create a 2x4 table where the first column has a dropdown for selection. Upon choosing an option, the associated data will populate the other 3 columns. I'm new to this, so please bear with me.
Using x, y, z as placeholders, the data will come from a text file. For example, if "rose" is chosen, the temperature, humidity, and moisture data will be displayed in the x, y, z columns respectively.
<!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>