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 面向对象编程(一) 封装
Aug 28 Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 Javascript
JavaScript中CreateTextFile函数
Aug 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数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
js下用gb2312编码解码实现方法
2009/12/31 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
Python 正则表达式(转义问题)
2014/12/15 Python
python持久性管理pickle模块详细介绍
2015/02/18 Python
用Python进行行为驱动开发的入门教程
2015/04/23 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
Python 去除字符串中指定字符串
2020/03/05 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
物业管理员岗位职责范文
2013/11/25 职场文书
社会实践评语
2014/04/28 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
运动员入场前导词
2015/07/20 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书