使用javascript将CSV文件加载到HTML表格中 [英] Loading a CSV file into an HTML table using javascript
问题描述
我想创建一个加载选定CSV文件（从硬盘驱动器）并使用表格HTML显示其内容的网页。
该项目包含两个组件，到目前为止，我一直在研究后者;在javascript中生成一个嵌套数组中的表。
出于某种原因，这些列不会以他们应该的方式显示。
我的代码
<！DOCTYPE html>< html>< body>< table id =1> < / table>< /><按钮onclick =createTable（）>创建< / button>< script> function createTable（）{var array = [[1,2,3]，[4,5,6] ，[7,8,9]]; document.getElementById（1）。innerHTML =; //明确。 for（i = 0; i< array.length; i ++）{document.getElementById（1）。innerHTML + =< tr>; for（k = 0; k
=h2_lin>解决方案
首先将表格内容保存为变量，然后将其设置为innerHTML。每次添加一个< tr> （或者任何非单身标签），浏览器立即呈现结束标签。
试试这个：
函数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;
$ b因为你打算使用 FileReader code> API，IE9支持无论如何都不在表格中。更新上面的函数以使用'newer' forEach 数组函数
<要使用JavaScript加载文件，您必须使用 FileReader HTML5 API。我可以给你一些关于如何去做这件事的指导。这是所有 未经测试的代码 ，但它给你一个小小的想法做什么
1.创建一个输入字段
< input type =fileid =filename =file>
2.触发此输入变更的回应
var file = document.getElementById（'file'）;
file.addEventListener（'change'，function（）{
var reader = new FileReader（）;
var f = file.files [0];
reader.onload =函数（e）{
var CSVARRAY = parseResult（e.target.result）; //这就是csv数组的位置
};
reader.readAsText（f）;
}）;
3.使用split / push将结果排列到数组中。这使用 \\\
作为行分隔符，，
作为单元格分隔符。 function parseResult（result）{
var resultArray = [];
result.split（\\\
）。forEach（function（row）{
var rowArray = [];
row.split（，）。forEach ）{
rowArray.push（cell）;
}）;
resultArray.push（rowArray）;
}）;
返回resultArray;
$ / code>
（或者您可以使用第三方插件为您解析CSV ：爸爸解析，例如）
I want to create a webpage that loads a selected CSV file (from hard drive) and displays its contents using table 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.
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>
解决方案 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.
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. Updated the above function to use the 'newer' forEach array function
ADDENDUM
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.Create a input field
<input type="file" id="file" name="file">
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.Parse the result to an array by using split/push. This uses \n as row delimiter and , as cell delimiter.
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)
这篇关于使用javascript将CSV文件加载到HTML表格中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
