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>

JSFiddle

Answer 1

您可以先稍微改进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不会在页面重新加载时触发，并且您可能会错过数据表中的初始值。

将文件中的数据放入“值”属性。请注意，如果文件很大，则应设计其他方法-涉及分页等。

在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;
 }

Answer 2

如果可以的话，如果您不熟悉以下格式，我建议您将数据放入JSON文件中：https://www.w3schools.com/jS/js_json_intro.asp

直接在JS中获取数据会更容易，但会在HTML页面上显示它。

在阅读了有关JSON的内容后，如果无法解决，请告诉我！

如何从文本文件中提取数据并输出到网页表

2 个答案: