js读取csv文件并使用json显示出来


Posted in Javascript onJanuary 09, 2015

摘要:

前面分享了用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读取csv文件并使用json显示出来

注意:上面的例子需要服务环境

Javascript 相关文章推荐
javascript 类方法定义还是有点区别
Apr 15 Javascript
Exjs 入门篇
Apr 07 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
微信JS接口汇总及使用详解
Jan 09 #Javascript
推荐一款jQuery插件模板
Jan 09 #Javascript
JavaScript中Cookie操作实例
Jan 09 #Javascript
使用javascript实现简单的选项卡切换
Jan 09 #Javascript
14个有用的Jquery技巧分享
Jan 08 #Javascript
jQuery中insertBefore()方法用法实例
Jan 08 #Javascript
jQuery中insertAfter()方法用法实例
Jan 08 #Javascript
You might like
php 无限极分类
2008/03/27 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
Javascript之文件操作
2007/03/07 Javascript
7个Javascript地图脚本整理
2009/10/20 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python复制目录结构脚本代码分享
2015/03/06 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
Python并行分布式框架Celery详解
2018/10/15 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
python语言元素知识点详解
2019/05/15 Python
python支付宝支付示例详解
2019/08/22 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
汽车运用工程毕业生自荐信
2013/10/29 职场文书
大四学年自我鉴定
2013/11/13 职场文书
社会实践心得体会
2014/01/03 职场文书
初中生活随笔
2015/08/15 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python