使用javascript将CSV文件加载到HTML表中

Loading a CSV file into an HTML table using javascript

本文关键字：HTML 表中 加载 文件 javascript CSV 使用      更新时间：2023-09-26

我想创建一个网页，加载选定的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）

经过长时间的搜索，这可能是我遇到的最简单、功能最强大的脚本，也是免费的。虽然它不直接处理数组修改，但它很容易编辑和引出您想要的结果。

相关文章：