使用 javascript 将 CSV 文件加载到 HTML 表格中 [英] Loading a CSV file into an HTML table using javascript
问题描述
我想创建一个网页，用于加载选定的 CSV 文件(从硬盘驱动器)并使用表格 HTML 显示其内容.
I want to create a webpage that loads a selected CSV file (from hard drive) and displays its contents using table HTML.
该项目包含两个组件，到目前为止，我一直在研究后者；从javascript中的嵌套数组生成表.
The project incorporates two components and so far, I've been researching the latter; generating a table out of a nested array in javascript.
出于某种原因，列未按应有的方式显示.
For some reason, the columns do not appear the way they should.
我的代码
<!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>推荐答案
先将表格内容保存到一个变量中，然后再将其设置为innerHTML.每次添加 <tr>(或任何非单例标签)时，浏览器都会立即呈现结束标签.
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.
试试这个:
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 数组函数
Because you are planning on using the FileReader API, IE9 support is off the table anyways. Updated the above function to use the 'newer' forEach array function
附录
要使用 javascript 加载文件，您必须使用 FileReader HTML5 API.我可以给你一些关于你应该如何做这件事的指示.这都是未经测试的代码，但它让您知道该怎么做
To load a file with javascript you have to use the 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.创建输入框
<input type="file" id="file" name="file">
2.触发此输入变化的响应
2.Trigger a response on change of this input
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将结果解析为数组.这使用
作为行分隔符和 , 作为单元格分隔符.
3.Parse the result to an array by using split/push. This uses
as row delimiter and , as cell delimiter.
function parseResult(result) {
var resultArray = [];
result.split("
").forEach(function(row) {
var rowArray = [];
row.split(",").forEach(function(cell) {
rowArray.push(cell);
});
resultArray.push(rowArray);
});
return resultArray;
}
(或者您可以使用第三方插件为您解析 CSV:papa parse，例如)
(or you can use a third party plugin which will parse the CSV for you: papa parse, for instance)
这篇关于使用 javascript 将 CSV 文件加载到 HTML 表格中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
