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 匿名函数的理解(透彻版)
Jan 28 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
js实现无缝循环滚动
Jun 23 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
javascript前端实现多视频上传
Dec 13 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/12/06 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
python中正则表达式的使用方法
2018/02/25 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
大学三年的自我评价
2013/12/25 职场文书
ktv筹备计划书
2014/05/03 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
党员违纪检讨书
2015/05/05 职场文书
法律进社区活动总结
2015/05/07 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
法律意见书范文
2015/06/04 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL