我想创建一个网页，加载选定的 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;
}
因为您计划使用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 )
关于javascript - 使用 javascript 将 CSV 文件加载到 HTML 表中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34494032/