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 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
js前端导出Excel的方法
Nov 01 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
js模拟实现烟花特效
Mar 10 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
实用函数4
2007/11/08 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
JS的反射问题
2010/04/07 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
JS作用域深度解析
2016/12/29 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
Django model update的多种用法介绍
2020/03/28 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
python属于解释语言吗
2020/06/11 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
研究生自我鉴定范文
2013/10/30 职场文书
大学生四年生活自我鉴定
2013/11/21 职场文书
生产厂厂长岗位职责
2013/12/25 职场文书
全国文明单位申报材料
2014/05/31 职场文书
商业项目策划方案
2014/06/05 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
亮剑观后感
2015/06/05 职场文书
贫困证明怎么写
2015/06/16 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python
MySQL中varchar和char类型的区别
2021/11/17 MySQL