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="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<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>
效果图：
注意：上面的例子需要服务环境
相关文章
这篇文章主要介绍了JS实现类似51job上的地区选择效果,结合完整实例形式分析了javascript基于鼠标事件响应实现页面元素动态变换的相关操作技巧,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了javascript检查浏览器是否支持flash的实现代码,需要的朋友可以参考下2014-08-08
这篇文章主要介绍了js实现鼠标感应图片展示的方法,实例分析了javascript鼠标事件及样式的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了javascript判断chrome浏览器的方法，通过userAgent判断检测一下userAgent返回的字符串里面是否包含“Chrome”,需要的朋友可以参考下2014-03-03
这篇文章主要为大家详细介绍了js制作网站首页图片轮播特效代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要为大家详细介绍了JavaScript实现简单的音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
下面小编就为大家带来一篇window.open打开窗口被拦截的快速解决方法。觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了javascript完美实现给定日期返回上月日期的方法,结合实例形式分析了javascript日期时间的计算技巧,并给出了格式化日期时间的操作方法,需要的朋友可以参考下2017-06-06
JavaScript中介者模式是一种行为型设计模式,用于降低多个对象之间的耦合性,在中介者模式中,多个对象之间不直接相互通信,而是通过中介者进行通信, 本文就来给大家详细的介绍一下JS设计模式之中介者模式使用方法,需要的朋友可以参考下2023-08-08
继承是面向对象编程中的一个重要概念,它允许一个对象（子类或派生类）获取另一个对象（父类或基类）的属性和方法,在 JavaScript 中,有多种方式可以实现继承,本文将给大家介绍六种常见的JavaScript继承方法,需要的朋友可以参考下2023-09-09
最新评论