gpt4 book ai didi

javascript - 从某个位置读取 csv 文件并显示为 html 表格

转载 作者:搜寻专家 更新时间:2023-10-31 22:05:38 25 4
gpt4 key购买 nike

有什么方法可以让 HTML 页面从特定目的地读取 csv 文件并将其显示为网页中的 HTML 表格?

我正在开发一个网页来显示已登录用户的状态。因此 HTML 页面必须自动读取 csv 文件并相应地在网页中显示它,因为 csv 文件会定期更新。


编辑:

根据答案的建议添加了代码,但浏览器中没有弹出任何内容

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSV Downloader</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
<script>
function arrayToTable(tableData) {
var table = $('<table></table>');
$(tableData).each(function (i, rowData) {
var row = $('<tr></tr>');
$(rowData).each(function (j, cellData) {
row.append($('<td>'+cellData+'</td>'));
});
table.append(row);
});
return table;
}

$.ajax({
type: "GET",
url: "C:\Users\tim tom\Desktop\csvTOhtml\data.csv",
success: function (data) {
$('body').append(arrayToTable(Papa.parse(data).data));
}
});
</script>
</body>

最佳答案

三步流程

您需要三个步骤:

1) 使用Ajax从您的服务器获取数据并将其转换为数组。你可以这样做,例如。使用以下 jQuery :

$.ajax({
type: "GET",
url: "data.csv",
success: CSVToHTMLTable
});

2) 获得 CSV 文件后,您需要对其进行解析。一种简单可靠的方法是使用像 Papa Parse 这样的库:

var data = Papa.parse(data).data;

3) 您需要定义一个函数来将数组转换为 HTML 表格。以下是使用 jQuery 执行此操作的方法:

function arrayToTable(tableData) {
var table = $('<table></table>');
$(tableData).each(function (i, rowData) {
var row = $('<tr></tr>');
$(rowData).each(function (j, cellData) {
row.append($('<td>'+cellData+'</td>'));
});
table.append(row);
});
return table;
}

把一切放在一起

这是将所有内容组合在一起的方法:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
<script>
function arrayToTable(tableData) {
var table = $('<table></table>');
$(tableData).each(function (i, rowData) {
var row = $('<tr></tr>');
$(rowData).each(function (j, cellData) {
row.append($('<td>'+cellData+'</td>'));
});
table.append(row);
});
return table;
}

$.ajax({
type: "GET",
url: "http://localhost/test/data.csv",
success: function (data) {
$('body').append(arrayToTable(Papa.parse(data).data));
}
});
</script>

关于javascript - 从某个位置读取 csv 文件并显示为 html 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36104089/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com