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 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
JS实现日期加减的方法
Nov 29 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 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连接SQLServer2005 的问题解决方法
2010/07/19 PHP
PHP Directory 函数的详解
2013/03/07 PHP
php实现简单洗牌算法
2013/06/18 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
jQuery代码优化 遍历篇
2011/11/01 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
详解如何运行vue项目
2019/04/15 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
python安装Scrapy图文教程
2017/08/14 Python
python实现维吉尼亚加密法
2019/03/20 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
一套PHP的笔试题
2013/05/31 面试题
考核工作实施方案
2014/03/30 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
Elasticsearch 索引操作和增删改查
2022/04/19 Python
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers