Question

我想创建一个网页，用于加载选定的CSV文件（来自硬盘），并使用表格HTML显示其内容。

该项目包含两个组成部分，到目前为止，我一直在研究后者;在javascript中从嵌套数组生成一个表。

出于某种原因，列不会按照它们的方式显示。

我的代码

＆＃13;

<!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>

＆＃13;

Answer 1

首先将表格内容保存到变量中，然后将其设置为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，例如）

Answer 2

经过长时间的搜索，this可能是我遇到的最简单，最实用的脚本，也是免费提供的。虽然它不直接处理数组修改，但它易于编辑并获得您想要的结果。

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

2 个答案: