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 相关文章推荐
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
JS 日期比较大小的简单实例
Jan 13 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
原生js+ajax分页组件
Jan 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 编写的日历
2006/10/09 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
python 多个参数不为空校验方法
2019/02/14 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
硕士研究生自我鉴定
2013/11/08 职场文书
应届医学毕业生求职信分享
2013/12/02 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
擅自离岗检讨书
2014/02/11 职场文书
市场营销工作计划书
2014/05/06 职场文书
现场活动策划方案
2014/08/22 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
锅炉工岗位职责
2015/02/13 职场文书
开学典礼观后感
2015/06/15 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
2016年母亲节寄语
2015/12/04 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL