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 相关文章推荐
js电信网通双线自动选择技巧
Nov 18 Javascript
Ruffy javascript 学习笔记
Nov 30 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
分析JS中this引发的bug
Dec 12 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
小程序使用分包的示例代码
Mar 23 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
生成缩略图
2006/10/09 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
python检查指定文件是否存在的方法
2015/07/06 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
Pytorch之contiguous的用法
2019/12/31 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
Python grpc超时机制代码示例
2020/09/14 Python
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
淘宝店铺营销方案
2014/02/13 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
护士实习自荐信
2015/03/06 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python