有没有办法将文本数据从文本文件导入到 html 表中[重复]

Question

我必须将文本文件加载到 HTML 表格中，但不知道该怎么做。

这是我必须放入表格的文档和文本文档的示例。

<?php # Script 3.4 - index.php
$page_title = 'Climate Data For All Cities';
include ('./includes/header.html');
?>
<h1 id="mainhead">Climate Data For All Cities</h1>
<p>There are currently 80 cities.</p>
(table will go here)
<?php
include ('./includes/footer.html');
?>

文本文档：

Lander  WY  5557    99  -35 109 140 67
Milwaukee   WI  672 98  -7  79  177 124
Seattle WA  400 94  12  55  233 163
Spokane WA  2356    98  -16 95  187 112
Burlington  VT  332 91  6   54  217 168
Norfolk VA  24  98  19  85  145 117
Richmond    VA  164 101 16  105 165 115
Salt Lake City  UT  4221    103 -11 129 152 86
Dallas  TX  551 106 10  130 152 89
Houston TX  96  104 19  73  166 94
San Antonio TX  788 102 16  90  165 83
Memphis TN  258 101 12  121 151 112
Huron   SD  1281    100 -30 121 147 80
Rapid City  SD  3162    106 -30 106 127 95

Answer 1

我更像是一个 JS 类型的人，但您可以将其集成到 PHP 中以无缝工作。您需要将以下内容添加到您的头部标签中

  <script
    src="https://code.jquery.com/jquery-3.4.0.min.js"
    integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
    crossorigin="anonymous">
  </script>
  <script src="text.js" charset="utf-8"></script>

您提供的文本文件保存为与 index html 同级的“text.txt”，以及以下 text.js 脚本。

text.txt 包含以下内容

Lander  WY  5557    99  -35 109 140 67
Milwaukee   WI  672 98  -7  79  177 124
Seattle WA  400 94  12  55  233 163
Spokane WA  2356    98  -16 95  187 112
Burlington  VT  332 91  6   54  217 168
Norfolk VA  24  98  19  85  145 117
Richmond    VA  164 101 16  105 165 115
Salt Lake City  UT  4221    103 -11 129 152 86
Dallas  TX  551 106 10  130 152 89
Houston TX  96  104 19  73  166 94
San Antonio TX  788 102 16  90  165 83
Memphis TN  258 101 12  121 151 112
Huron   SD  1281    100 -30 121 147 80
Rapid City  SD  3162    106 -30 106 127 95

您的正文中应该有以下 HTML（可以在 php 中完成）

<h1>Text File reader</h1>
<button type="button" name="button" id="fileReadButton">LOAD</button>
<table id="textFileContentTable">
  <thead>
    <th>Location</th>
    <th>State</th>
    <th>High</th>
    <th>Low</th>
    <th>Days Clear</th>
    <th>Days Cloudy</th>
    <th>Days with Precip</th>
    <th>Days With Snow</th>
  </thead>
</table>

最后，这里是通过单击按钮从文本文件中获取数据并填写表格的脚本。

$().ready(function(){
 function populateTable(filePath){
    // get request for the file
    $.get(filePath, function(response){
      let rows = response.split("\n");
      // getting each row of the text file
      for(var i = 0; i < rows.length; i++){
        var validRowData = [];
        var rowData = rows[i].split(" ");
        // getting the data for the row
        for (var z = 0; z < rowData.length; z++) {
          if(rowData[z] == ""){
          }else{
            validRowData.push(rowData[z]);
          }
          // sanitising the strings like San Antonio and Rapid City
          if(validRowData.length == 9){
            validRowData[0] = validRowData[0] + " " + validRowData[1];
            validRowData.splice(1, 1);
          }
        }
        // creating the row template, iterating through the valid data to create TDs
        var rowTemplate = "<tr>";
        for (var j = 0; j < validRowData.length; j++) {
          rowTemplate += "  <td> " + validRowData[j] + " </td> ";
        }
        rowTemplate += "   </tr>";
        // appending it to the table
        $('#textFileContentTable').append(rowTemplate);
      }
    });
  }

  // onclick of the button, load the table
  $('#fileReadButton').click(function(){
    populateTable('./text.txt');
  });
});