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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
Vue制作Todo List网页
Apr 26 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
JavaScript实现留言板案例
Mar 17 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入门速成教程
2007/03/19 PHP
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
深入了解Python在HDA中的应用
2019/09/05 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
介绍信样本
2015/01/31 职场文书
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python