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 学习笔记(七)字符串的连接
Dec 31 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 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一些常用的正则表达式字符的一些转换
2008/07/29 PHP
php GeoIP的使用教程
2011/03/09 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
基于Python List的赋值方法
2018/06/23 Python
python程序 创建多线程过程详解
2019/09/23 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
服装设计专业毕业生求职信
2014/04/09 职场文书
圣诞晚会主持词
2015/07/01 职场文书