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

【问题标题】：How to extract data from text file and output to web page table如何从文本文件中提取数据并输出到网页表
【发布时间】：2019-03-10 20:40:28
【问题描述】：

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

我用 x,y,z 显示了我希望在其中显示我的数据值的位置。数据将从文本文件中提取。所以举个例子，如果我选择rose，那么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

【问题讨论】：

你想显示哪些数据而不是 X,Y,Z
数据是温度、湿度和湿度。例如 72、50% 和 68%
根据您的问题，您说数据将从文本文件中提取。所以你已经得到了这些价值。现在您已将这些值分配给 td。为此，您可以动态添加 tr 和 td 值作为文本
那么数据会根据选择的选项而改变。此外，为了添加更多的数据，它更适合从文本文件中提取数据。每朵花都有自己独特的价值。

标签： javascript html css dropdown

【解决方案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 不会在页面重新加载时触发，您可能会错过数据表中的初始值。

将文件中的数据放入“value”属性中。请注意，如果文件很大，您应该设计一种不同的方法 - 涉及分页等。

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

【讨论】：

如何在选择选项时更改表格中的数据值。比如我还想在选择“daisy”时在表格中显示x1,y1,z1等等。
好吧，“解析 xyz”（应该转换为实际代码，这取决于您的数据）和类似“document.getElementById("demo").innerHTML = "You selected: " +flowerName”（取决于您的表格结构）完成这项工作。
对不起，我是新手，您能否将代码连同您的解释一起显示。这会很有帮助。

【解决方案2】：

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

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

阅读关于 JSON 的内容后，如果不可能，请告诉我！

【讨论】：

我喜欢使用 JSON 的想法。我无法将数据显示在表格的正确位置。
您是否创建了 JSON 文件？你可以通过给每个一个 id 来改进你的 HTML。也许向我展示你对代码的改进。