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教程
Jun 09 Javascript
JavaScript 创建对象和构造类实现代码
Jul 30 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
在nuxt中使用路由重定向的实例
Nov 06 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
微信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
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
用javascript实现画板的代码
2007/09/05 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
python实现桌面气泡提示功能
2019/07/29 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
python脚本定时发送邮件
2020/12/22 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
《孔子拜师》教学反思
2014/02/24 职场文书
给老婆的保证书范文
2014/04/28 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
财务负责人岗位职责
2015/02/03 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers