js讀取csv文件并使用json顯示出來
更新時間：2015年01月09日 10:40:01 投稿：hebedich
這篇文章主要介紹了js讀取csv文件并使用json顯示出來,需要的朋友可以參考下
摘要：
前面分享了用js將json數據下載為csv文件，方便后期管理。但是對于測試人員更希望能夠以頁面的形式展現任務，所以就做了一個將csv文件展現在頁面上的例子。
代碼：
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>csv</title>
<script src=">
<script src="./papaparse.min.js"></script>
<style>
html,body{
font-size: 14px;
font-family: 'Microsoft Yahei',Tahoma,Verdana,simsun,sans-serif;
}
table {width: 85%;margin: 30px auto;}
</style>
</head>
<body>
<table id="table" border="1">
<caption>CSV轉JSON</caption>
<thead>
<tr>
<th>Vehicle</th>
<th>Date</th>
<th>Location</th>
<th>Speed</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
Papa.parse('./Result.csv', {
download: true,
complete: function(results) {
var data = results.data, html;
for(var i = 1, _l = data.length-1; i < _l; i++) {
var item = data[i];
html += '<tr><td>'+item[0].substring(1)+'</td><td>'+item[1].substring(1)+'</td><td>'+item[2].substring(1)+'</td><td>'+item[3].substring(1)+'</td></tr>';
}
$('#table tbody').append(html);
}
});
</script>
</body>
</html>
效果圖：
注意：上面的例子需要服務環(huán)境
相關文章
這篇文章主要給大家介紹了關于ECharts數據可視化基本使用之常用圖表類型的相關資料,echarts是一款基于JavaScript的數據可視化圖表庫,提供直觀,生動,可交互,可個性化定制的數據可視化圖表,需要的朋友可以參考下2023-11-11
下面小編就為大家分享一篇js判斷文件類型大小并給出提示的實現方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
本篇文章主要介紹了css3元素簡單的閃爍效果實現(html5 jquery) 需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
本篇文章主要介紹了微信小程序之ES6與事項助手的功能實現，具有一定的參考價值，有興趣的同學可以了解一下。2016-11-11
Javascript 實現微信分享（QQ、朋友圈、分享給朋友）
這篇文章主要介紹了Javascript 實現微信分享（QQ、朋友圈、分享給朋友）的相關資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了JS中的art-template模板如何使用if判斷，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了JavaScript多種頁面刷新方法小結，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了JS實現網頁表格自動變大縮小的方法,實例分析了javascript操作表格的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要以實例的方式講解多個js毫秒倒計時同時進行效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
JavaScript 不只是腳本...2007-05-05