js讀取csv文件并使用json顯示出來(lái)
摘要:
前面分享了用js將json數(shù)據(jù)下載為csv文件,方便后期管理。但是對(duì)于測(cè)試人員更希望能夠以頁(yè)面的形式展現(xiàn)任務(wù),所以就做了一個(gè)將csv文件展現(xiàn)在頁(yè)面上的例子。
代碼:
<!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轉(zhuǎn)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>
效果圖:
注意:上面的例子需要服務(wù)環(huán)境
相關(guān)文章
JavaScript實(shí)現(xiàn)簡(jiǎn)單拖拽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單拖拽效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09JS實(shí)現(xiàn)文字鏈接感應(yīng)鼠標(biāo)淡入淡出改變顏色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)文字鏈接感應(yīng)鼠標(biāo)淡入淡出改變顏色的方法,實(shí)例分析了javascript操作鼠標(biāo)事件及css樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02TypeScript常見(jiàn)類型及應(yīng)用示例講解
這篇文章主要介紹了TypeScript常見(jiàn)類型及應(yīng)用示例講解,本章我們會(huì)講解?JavaScript?中最常見(jiàn)的一些類型,以及對(duì)應(yīng)的描述方式,有需要的朋友可以借鑒參考下2022-02-02JS實(shí)現(xiàn)可調(diào)整倒計(jì)時(shí)間代碼分享
這篇文章主要介紹了JS實(shí)現(xiàn)可調(diào)整倒計(jì)時(shí)間代碼,效果很酷炫,也很具有實(shí)用價(jià)值,感興趣的小伙伴們可以參考一下2015-08-08