使用 javascript 将 CSV 文件加载到 HTML 表格中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34494032/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading a CSV file into an HTML table using javascript
提问by John
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>回答by Poul Kruijt
Save the table contents to a variable first and set it to the innerHTML afterwards. Everytime you add a <tr>(or any not singleton tag for that matter), the browser immediately renders the closing tag.
首先将表格内容保存到一个变量中，然后将其设置为innerHTML。每次添加一个<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 FileReaderAPI, IE9 support is off the table anyways. Updated the above function to use the 'newer' forEacharray function
因为您打算使用FileReaderAPI，所以无论如何都不支持 IE9。更新了上述函数以使用“较新”的forEach数组函数
ADDENDUM
附录
To load a file with javascript you have to use the FileReaderHTML5 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
要使用 javascript 加载文件，您必须使用FileReaderHTML5 API。我可以给你一些关于你应该如何去做的建议。这都是未经测试的代码，但它让您知道该怎么做
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. This uses \nas row delimiter and ,as cell delimiter.
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;
}
(or you can use a third party plugin which will parse the CSV for you: papa parse, for instance)
（或者您可以使用第三方插件为您解析 CSV：papa parse，例如）
回答by John
After some long searching, thisis 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.
经过长时间的搜索，这可能是我遇到过的最简单、最实用的脚本，而且也是免费的。虽然它不直接处理数组修改，但很容易编辑并得出您想要的结果。
