使用javascript将CSV文件加载到HTML表中

Question

我想创建一个网页（从硬盘驱动器）加载选定的CSV文件并使用表格HTML显示其内容。

该项目包含两个组成部分，到目前为止，我一直在研究后者。 从javascript中的嵌套数组中生成表格。

由于某些原因，列的显示方式不正确。

我的密码

 <!DOCTYPE html> <html> <body> <table id="1"> </table> <button onclick="createTable()">Create</button> <script> function createTable() { var array = [[1,2,3],[4,5,6],[7,8,9]]; document.getElementById("1").innerHTML = ""; //Clear. for (i = 0; i < array.length; i++) { document.getElementById("1").innerHTML += "<tr>"; for (k = 0; k < array[0].length; k++) { document.getElementById("1").innerHTML += "<td>" + array[i][k] + "</td>" ; } document.getElementById("1").innerHTML += "</tr>"; } } </script> </body> </html>

Answer 1

首先将表内容保存到变量，然后再将其设置为innerHTML。 每次添加<tr> （或与此相关的任何非单例标记）时，浏览器都会立即呈现结束标记。

尝试这个：

function createTable() {
    var array = [[1,2,3],[4,5,6],[7,8,9]];
    var content = "";
    array.forEach(function(row) {
        content += "<tr>";
        row.forEach(function(cell) {
            content += "<td>" + cell + "</td>" ;
        });
        content += "</tr>";
    });
    document.getElementById("1").innerHTML = content;
}

因为您打算使用FileReader API，所以无论如何都不会提供IE9支持。 更新了上述函数，以使用“较新的” forEach数组函数

附录

要使用javascript加载文件，您必须使用FileReader HTML5 API。 我可以为您提供一些有关如何执行此操作的指示。 这都是未经测试的代码 ，但是它使您有所了解

1.创建一个输入字段

<input type="file" id="file" name="file">

2.触发对此输入的更改的响应

var file = document.getElementById('file');
file.addEventListener('change', function() {
    var reader = new FileReader();
    var f = file.files[0];
    reader.onload = function(e) {
        var CSVARRAY = parseResult(e.target.result); //this is where the csv array will be
    };
    reader.readAsText(f);
});

3，使用split / push将结果解析为数组 这使用\\n作为行定界符，使用,作为单元格定界符。

function parseResult(result) {
    var resultArray = [];
    result.split("\n").forEach(function(row) {
        var rowArray = [];
        row.split(",").forEach(function(cell) {
            rowArray.push(cell);
        });
        resultArray.push(rowArray);
    });
    return resultArray;
}

（或者您可以使用第三方插件为您解析CSV：例如papa parse ）

Answer 2

经过长时间的搜索，这可能是我遇到过的最简单，最实用的脚本，也可以免费获得。 尽管它不直接处理数组修改，但很容易编辑和得出所需的结果。

使用javascript将CSV文件加载到HTML表中

问题描述

2 个解决方案

解决方案1
4 2015-12-28 13:09:22

解决方案2
1 2015-12-29 07:40:10

使用javascript将CSV文件加载到HTML表中

问题描述

2 个解决方案

解决方案1 4 2015-12-28 13:09:22

解决方案2 1 2015-12-29 07:40:10

解决方案1
4 2015-12-28 13:09:22

解决方案2
1 2015-12-29 07:40:10