Javascript 如何将制表符分隔格式的文本文件中的内容显示为html表格_Javascript_Php_Html_Html Table

Javascript 如何将制表符分隔格式的文本文件中的内容显示为html表格

javascript php html

Javascript 如何将制表符分隔格式的文本文件中的内容显示为html表格,javascript,php,html,html-table,Javascript,Php,Html,Html Table,我有一个文本文件，其中的数据看起来像一个表，因为它是以制表符分隔的格式如何以html表格的形式仅显示文本文件中的几个值这是我的文本文件的外观： @ RUNNO TRNO R# O# C# CR MODEL... TNAM..................... FNAM.... WSTA.... SOIL_ID... SDAT PDAT EDAT ADAT MDAT HDAT DWAP CWAM HWAM HWAH BW

我有一个文本文件，其中的数据看起来像一个表，因为它是以制表符分隔的格式

如何以html表格的形式仅显示文本文件中的几个值

这是我的文本文件的外观：

@   RUNNO   TRNO R# O# C# CR MODEL... TNAM..................... FNAM.... WSTA.... SOIL_ID...    SDAT    PDAT    EDAT    ADAT    MDAT    HDAT  DWAP    CWAM    HWAM    HWAH    BWAH  PWAM    HWUM  H#AM    H#UM  HIAM  LAIX  IR#M  IRCM  PRCM  ETCM  EPCM  ESCM  ROCM  DRCM  SWXM  NI#M  NICM  NFXM  NUCM  NLCM  NIAM  CNAM  GNAM  PI#M  PICM  PUPC  SPAM  KI#M  KICM  KUPC  SKAM  RECM  ONTAM   ONAM  OPTAM   OPAM   OCTAM    OCAM    DMPPM    DMPEM    DMPTM    DMPIM     YPPM     YPEM     YPTM     YPIM    DPNAM    DPNUM    YPNAM    YPNUM  NDCH TMAXA TMINA SRADA DAYLA   CO2A   PRCP   ETCP   ESCP   EPCP
        1      1  1  0  0 WH CSCER046 DRYLAND  - 0 KG N/HA      KSAS0001 KSAS8101 IBWH980018 1981279 1981289 1981294 1982141 1982174 1982174    46    7615    2848    2848       0  3308  0.0250 11371    22.0 0.374   2.0     0     0   600   422   188   234    12   115   141     1     0   -99    76   127    54    67    54   -99   -99   -99   -99   -99   -99   -99   -99     0   7842   7841      0      0   78645   78603     13.1     18.8     40.5      -99      4.9      7.0     15.1      -99      -99    100.6      -99     37.6   245  13.1   1.2  12.4  12.6  340.7  579.8  405.2    -99    -99
        2      2  1  0  0 WH CSCER046 DRYLAND  - 60 KG N/HA     KSAS0001 KSAS8101 IBWH980018 1981279 1981289 1981294 1982141 1982174 1982174    46   10018    4150    4150       0  4656  0.0288 14411    23.6 0.414   2.5     0     0   600   431   212   219    12   110   139     1    60   -99   105   132    78    94    79   -99   -99   -99   -99   -99   -99   -99   -99     0   7842   7841      0      0   78652   78608     17.3     24.2     47.3      -99      7.2     10.0     19.6      -99    167.0     95.6     69.2     39.6   245  13.1   1.2  12.4  12.6  340.7  579.8  413.4    -99    -99
        3      3  1  0  0 WH CSCER046 DRYLAND  - 180 KG N/HA SP KSAS0001 KSAS8101

我只想在html表格中显示TRNO、Model、FNAM、WSTA。

提供的数据看起来像Ascii表格，而不是选项卡分隔的值。我添加了两种解决方案

Ascii表的解决方案-

使用正则表达式从标头获取密钥

// Get all keys from Header Row
var lines = asciiTable.split('\n');
var regexPattern = /\S+\s*/g;
var headers = lines[0].match(regexPattern);

通过使用刚才解析的键拼接行来获取单个值。这些关键点尚未修剪（它们确实带有空格）。这使得拼接数据成为可能

// fetch individual values (Also filter based on allowed keys)
var allowedKeys = ["TRNO", "MODEL...", "FNAM....", "WSTA...."];
for (i = 1; i < lines.length; i++) {
  start = 0;
  value = "";
  valueArray = [];
  headers.forEach(function(key) {
    if (allowedKeys.includes(key.trim())) {
      value = lines[i].slice(start, start + key.length);
      valueArray.push(value.trim());
    }
    start += key.length;
  });
  rows.push(valueArray);
}

将2D数组呈现为HTML表格-感谢@veganista的帮助

制表符分隔值的解决方案-

将这些转换为对象。我曾经

使用我们喜欢的关键点变换对象。（简单地说，取下不需要的钥匙）

将这些对象转换为HTML

// generate html
var html = "<table border='1|1'>";
Object.keys(results.data[0]).forEach(function(key) {
  html += "<th>" + key + "</th>";
});

results.data.forEach(function(row) {
  html += "<tr>";
  Object.keys(row).forEach(function(key) {
    html += "<td>" + row[key] + "</td>";
  });
  html += "</tr>";
});
html += "</table>";

$('body').append(html);

//生成html
var html=“”；
Object.key（results.data[0]）.forEach（函数（key）{
html+=“”+键+“”；
});
results.data.forEach（函数（行）{
html+=“”；
Object.keys（行）.forEach（函数（键）{
html++=“行[键]+”；
});
html+=“”；
});
html+=“”；
$（'body'）.append（html）；

提供的数据看起来像一个Ascii表，而不是一个选项卡分隔的值。我添加了两种解决方案