Joh*_*ohn 3 html javascript csv html-table
我想创建一个网页，加载选定的 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>首先将表格内容保存到一个变量中，然后将其设置为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;
}
因为您打算使用FileReaderAPI，所以无论如何都不支持 IE9。更新了上述函数以使用“较新”的forEach数组函数
附录
要使用 javascript 加载文件，您必须使用FileReaderHTML5 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，例如）