使用javascript将csv导入html表

rks48beu  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(342)

我正在制作一个简单的表格页面,我不想使用html手动添加行。我有大约100行数据,我在一个静态环境中工作,所以javascript是我唯一的选择(或者我知道的唯一一个可能能够做到这一点)。
我尝试了一些教程,并找到了将csv导入html的方法。我用了这个教程,效果很好。
但问题是,本教程使用了 <input> 标记以获取文件对象。我只有一个csv文件本地存储在与网页相同的文件夹中。我试着查找文件对象和blob,但到目前为止我还不能让它正常工作。我的所有职能都不起作用。

以下是我希望我的页面执行的操作:

打开后,我希望我的页面直接从csv加载数据并将其放入表中。我确实知道如何使用innerhtml将表代码添加到html页面,但我无法导入实际的csv数据。请帮忙!

e0bqpujr

e0bqpujr1#

出于安全原因,不允许从浏览器读取带有js的os文件。为此,必须在同一台服务器上读取csv文件和html页面,并使用ajax或某些服务器端语言生成json。我给你举一个ajax的例子

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "datatable.txt",
        dataType: "text",
        success: function(data) {processData(data);}
     });
});

function processData(allText) {
    var record_num = 5;  // or however many columns there are in each row
    var allTextLines = allText.split(/\r\n|\n/);
    var entries = allTextLines[0].split(',');
    var lines = [];

    var headings = entries.splice(0,record_num);
    while (entries.length>0) {
        var tarr = [];
        for (var j=0; j<record_num; j++) {
            tarr.push(headings[j]+":"+entries.shift());
        }
        lines.push(tarr);
    }
    // alert

或者使用这个库https://www.cssscript.com/lightweight-csv-table-converter-csvtotable-js/

相关问题