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

Question

I want to create a webpage that loads a selected CSV file (from hard drive) and displays its contents using table HTML. 我想创建一个网页（从硬盘驱动器）加载选定的CSV文件并使用表格HTML显示其内容。

The project incorporates two components and so far, I've been researching the latter; 该项目包含两个组成部分，到目前为止，我一直在研究后者。 generating a table out of a nested array in javascript. 从javascript中的嵌套数组中生成表格。

For some reason, the columns do not appear the way they should. 由于某些原因，列的显示方式不正确。

My code 我的密码

 <!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

Save the table contents to a variable first and set it to the innerHTML afterwards. 首先将表内容保存到变量，然后再将其设置为innerHTML。 Everytime you add a <tr> (or any not singleton tag for that matter), the browser immediately renders the closing tag. 每次添加<tr> （或与此相关的任何非单例标记）时，浏览器都会立即呈现结束标记。

Try this: 尝试这个：

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;
}

Because you are planning on using the FileReader API, IE9 support is off the table anyways. 因为您打算使用FileReader API，所以无论如何都不会提供IE9支持。 Updated the above function to use the 'newer' forEach array function 更新了上述函数，以使用“较新的” forEach数组函数

ADDENDUM 附录

To load a file with javascript you have to use the FileReader HTML5 API. 要使用javascript加载文件，您必须使用FileReader HTML5 API。 I can give you some pointers as to how you should go about doing this. 我可以为您提供一些有关如何执行此操作的指示。 This is all untested code , but it gives you a little idea what to do 这都是未经测试的代码 ，但是它使您有所了解

1.Create a input field 1.创建一个输入字段

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

2.Trigger a response on change of this input 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.Parse the result to an array by using split/push. 3，使用split / push将结果解析为数组 This uses \\n as row delimiter and , as cell delimiter. 这使用\\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;
}

(or you can use a third party plugin which will parse the CSV for you: papa parse , for instance) （或者您可以使用第三方插件为您解析CSV：例如papa parse ）

Answer 2

After some long searching, this is probably the most simple and functional script that I could ever come across, also available for free. 经过长时间的搜索，这可能是我遇到过的最简单，最实用的脚本，也可以免费获得。 Although it doesn't deal with the array modification directly, it's easy to edit and elicit your desired results. 尽管它不直接处理数组修改，但很容易编辑和得出所需的结果。

使用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