Question

基本上，我想创建一个两行四列的表。在第一列中，我希望能够选择一个下拉菜单。选择后，与该选择关联的数据将输出到表中的其他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>

Answer 1

要使用javascript创建表格，可以参考here。

要使用javascript创建选择框，可以参考here。

我认为您需要捕获选择框的onchange事件，您可以参考 here。

如何根据选择的选项将数据输出到表

1 个答案: