Question

我有一个简单的csv文件。示例数据如下（sample.csv）。

date,team_1,team_2
2019-06-12,AUS,PAK
2019-06-13,IND,NZ

我希望以上内容在table页中显示为HTML，以便在将新记录添加到{{1}时，新行将自动添加到表中}文件。

有人可以帮助我提供一个非常简单的解决方案吗？

编辑：基于对this问题的回答，我编写（复制）了以下代码，但除第一行外，它未显示任何内容。

csv

function createTable() {
  var array = [
    ["date","team_1","team_2"],
    ["2019-06-12","AUS","PAK"],
    ["2019-06-13","IND","NZ"]
  ];
  var content = "";
  array.forEach(function(row) {
    content += "<tr>";
    row.forEach(function(cell) {
      content += "<td>" + cell + "</td>";
    });
    content += "</tr>";
  });
  document.getElementById("t1").innerHTML = content;
}
createTable()

Answer 1

此处此代码正常工作。按照您的描述打开 file.csv 。当您在CSV中添加或删除行时，它会在HTML页面中相应地起作用。

var init;
    const logFileText = async file => {
        const response = await fetch(file);
        const text = await response.text();
        all = text.split('\n');
        if (init !== all.length) {
            //console.log(all.length, init);
            init = all.length;
            //console.log('changed');
            var arr=[];
            all.forEach(el => {
                el=el.split(',');
                arr.push(el);
            });
            // console.log(arr);

            createTable(arr);

        }

    }

    function createTable(array) {
        var content = "";
        array.forEach(function (row) {
            content += "<tr>";
            row.forEach(function (cell) {
                content += "<td>" + cell + "</td>";
            });
            content += "</tr>";
        });
        document.getElementById("t1").innerHTML = content;
    }

    var file = 'file.csv';
    logFileText(file);
    setInterval(async () => {
        await logFileText(file);
    }, 2000);

<table id="t1"> </table>

CSV文件中的动态HTML表

1 个答案: