js讀取csv文件并使用json顯示出來
更新時間：2015年01月09日 10:40:01 投稿：hebedich
這篇文章主要介紹了js讀取csv文件并使用json顯示出來,需要的朋友可以參考下
摘要：
前面分享了用js將json數(shù)據(jù)下載為csv文件，方便后期管理。但是對于測試人員更希望能夠以頁面的形式展現(xiàn)任務，所以就做了一個將csv文件展現(xiàn)在頁面上的例子。
代碼：
復制代碼 代碼如下:
<!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)境
相關文章
本篇文章主要介紹了微信小程序開發(fā)之下拉刷新 上拉加載，具有一定的參考價值，有興趣的可以了解一下。2016-11-11
這篇文章主要介紹關于導出Excel通用方法的實用前端技巧,希望能夠幫助大家更好地處理數(shù)據(jù)導出需求,接下來,我將為大家詳細介紹這個方法和代碼實現(xiàn),需要的朋友可以參考下2023-09-09
本篇文章主要是對js判斷輸入是否為中文的函數(shù)進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
這篇文章主要介紹了解讀函數(shù)的節(jié)流與防抖問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了JS實現(xiàn)文字鏈接感應鼠標淡入淡出改變顏色的方法,實例分析了javascript操作鼠標事件及css樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了TypeScript常見類型及應用示例講解，本章我們會講解?JavaScript?中最常見的一些類型，以及對應的描述方式，有需要的朋友可以借鑒參考下2022-02-02
這篇文章介紹了原生JS可拖動彈窗效果實例代碼，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了JS實現(xiàn)可調整倒計時間代碼，效果很酷炫，也很具有實用價值，感興趣的小伙伴們可以參考一下2015-08-08
JavaScript接收鍵盤指令示例，按下鍵盤上不同的鍵，程序會跳轉到不同的網(wǎng)頁，本例中按下A鍵程序為跳轉到腳本之家的首頁，實現(xiàn)按鍵跳轉的功能。2009-10-10