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

标签 javascript html css dropdown

基本上我想创建一个两行四列的表格。在第一列中,我希望能够通过下拉菜单选择内容。选择后,与该选择关联的数据将输出到表中的其他 3 列。我对此很陌生,所以请理解。

我已经用 x,y,z 显示了我希望显示数据值的位置。因此,例如,如果我选择玫瑰,则温度、湿度和湿度将分别显示在 x、y、z 的位置。

code i am working with

    <!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>

最佳答案

关于使用 javascript 创建表,您可以引用 here .

关于使用 javascript 创建选择框,您可以引用 here .

我觉得你需要捕获select box的onchange事件,可以引用 here .

关于javascript - 如何根据选择的选项将数据输出到表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55035024/

相关文章:

html - CSS 样式不适用于页面

javascript - 使用基本 jQuery 选项卡的 FadeIn/FadeOut 故障

javascript - 为什么向提交事件添加 "return false;"会阻止页面刷新?

javascript - 如何在移动浏览器中即时更改网站的默认视口(viewport)设置?

javascript - 原型(prototype)继承设置

javascript - AngularJS 没有更新?

html - CSS 媒体查询仅适用于浏览器调整大小 (Edge)

html - 在特定单词之间强制换行

javascript - React 中 chrome 扩展中的组件之间切换的方式有哪些?

javascript - Div 隐藏不起作用