时间戳

首页 > 解决方案 > 使用 Javascript 将 CSV 转换为 HTML 表。使用 CSV 中的列添加 CSS 类

javascript - 使用 Javascript 将 CSV 转换为 HTML 表。使用 CSV 中的列添加 CSS 类

问题描述

我正在尝试制作一个从 CSV 中提取数据并创建 HTML 表的 JS。这是我当前的脚本。它工作正常，但我想添加功能。

我不想显示最后一列并使用该数据来设置行的 CSS 类。

这只是我的修补和学习，所以解释不仅仅是一个解决方案会很棒！

function pullData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var data = this.responseText;
      var lines = data.split(/\r?\n|\r/),
        output = [],
        i;
      for (i = 0; i < lines.length; i++)
        output.push(
          "<tr><td>" + lines[i].split(",").join("</td><td>") + "</tr></td>"
        );
      output =
        "<table><tr><th>One</th><th>Two</th><th>Three</th><th>Four</th><th>Five</th><th>Six</th><th>Seven</th><th>Colour</th></tr>" +
        output.join("") +
        "</table>";
      var div = document.getElementById("container");

      div.innerHTML = output;
    }
  };
  xhttp.open("GET", "data.csv", true);
  xhttp.send();
}

它产生

JS制作的表格

标签： javascripthtmlcss

解决方案

一种选择是将每一行的数据拆分为一个数组。然后用于pop()检索和删除数组的最后一个元素，即颜色。然后将其用于类名或内联样式。

const data = `1,2,3,4,5,6,7,red
1,2,3,4,5,6,7,blue
1,2,3,4,5,6,7,green
1,2,3,4,5,6,7,yellow
1,2,3,4,5,6,7,orange
1,2,3,4,5,6,7,pink`;

var lines = data.split(/\r?\n|\r/),
  output = [],
  i;
for (i = 0; i < lines.length; i++) {
  let columns = lines[i].split(",");
  output.push("<tr style='background-color:" + columns.pop() + "'><td>" + columns.join("</td><td>") + "</tr></td>");
}
output = "<table><tr><th>One</th><th>Two</th><th>Three</th><th>Four</th><th>Five</th><th>Six</th><th>Seven</th></tr>" +
  output.join("") +
  "</table>";
var div = document.getElementById("container");
div.innerHTML = output;
<div id="container"></div>

推荐阅读