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 相关文章推荐
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 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+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php中常用的预定义变量小结
2012/05/09 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
YII框架关联查询操作示例
2019/04/29 PHP
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
对于js垃圾回收机制的理解
2017/09/14 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
Vue+tracking.js 实现前端人脸检测功能
2020/04/16 Javascript
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
python实现转圈打印矩阵
2019/03/02 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
PyTorch中的C++扩展实现
2020/04/02 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
一些Solaris面试题
2015/12/22 面试题
优秀求职信范文分享
2014/01/26 职场文书
园艺师求职信
2014/04/27 职场文书
投资建议书模板
2014/05/12 职场文书
小学课外活动总结
2014/07/09 职场文书
退学证明范本3篇
2014/10/29 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
小平小道观后感
2015/06/09 职场文书
2015年除四害工作总结
2015/07/23 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
浅谈Vue的computed计算属性
2022/03/21 Vue.js