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 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
浅析JS运动
Dec 28 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
通过JavaScript下载文件到本地的方法(单文件)
Mar 17 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
基于vue--key值的特殊用处详解
Jul 31 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
jquery中this的使用说明
2010/09/06 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
js瀑布流布局的实现
2020/06/28 Javascript
python实现人人网登录示例分享
2014/01/19 Python
Python常用模块介绍
2014/11/21 Python
Python反射的用法实例分析
2018/02/11 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
python tqdm库的使用
2020/11/30 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
Gap英国官网:Gap UK
2018/07/18 全球购物
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
程序员机试试题汇总
2012/03/07 面试题
《宿建德江》教学反思
2014/04/23 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
启动仪式策划方案
2014/06/14 职场文书
世博会口号
2014/06/20 职场文书
个人对照检查材料思想汇报
2014/09/26 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
go xorm框架的使用
2021/05/22 Golang
JavaScript原型链详解
2021/11/07 Javascript