logo标签列表

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

javascripthtmlcsvhtml-table
5
我希望能创建一个网页，加载选定的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>

一个基于D3.js的简洁解决方案：http://bl.ocks.org/ndarville/7075823 - Anton Tarasenko
2个回答
6

首先将表格内容保存到一个变量中，然后将其设置为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）

无论如何，使用+=和innerHTML是非常糟糕的做法。 - T.J. Crowder
感谢您的快速回复。我也对将CSV加载到像上面那样的嵌套数组中感兴趣。 - John
3
经过长时间的搜索，这个 可能是我找到的最简单和功能最强大的脚本，而且还是免费提供的。虽然它没有直接处理数组修改，但很容易编辑并得出所需结果。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接