html jquery读取本地csv
时间: 2023-09-13 11:09:30 浏览: 96
可以通过jQuery的Ajax方法读取本地CSV文件。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>读取本地CSV文件</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<table id="myTable" border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
$(document).ready(function() {
$.ajax({
type: "GET",
url: "data.csv",
dataType: "text",
success: function(data) {
var rows = data.split("\n");
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].split(",");
if (cells.length > 1) {
var tr = $("<tr></tr>");
tr.append("<td>" + cells[0] + "</td>");
tr.append("<td>" + cells[1] + "</td>");
tr.append("<td>" + cells[2] + "</td>");
$("#myTable tbody").append(tr);
}
}
}
});
});
</script>
</body>
</html>
```
在这个例子中,我们使用jQuery的Ajax方法从名为"data.csv"的本地文件中读取数据。读取完毕后,我们将数据插入到一个HTML表格中。请注意,我们使用dataType参数指定文件数据的类型为"text"。在成功的回调函数中,我们首先将文件的每一行分割成单独的单元格,然后将它们插入到表格中。
阅读全文