AD

js读取csv文件并使用json显示出来

这篇文章主要介绍了js读取csv文件并使用json显示出来,需要的朋友可以参考下

摘要:

前面分享了用js将json数据下载为csv文件,方便后期管理。但是对于测试人员更希望能够以页面的形式展现任务,所以就做了一个将csv文件展现在页面上的例子。

代码:


<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <title>csv</title>

    <script src="**code.jquery**/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显示出来

注意:上面的例子需要服务环境

标签: 读取csv
分类: javascript技巧
时间: 2014-11-13

相关文章

  1. PHP读取csv文件转换成JSON并写入新的文件

    没什么好说的,直接上代码. <?php function csvJSON() { // data.csv 是你的csv文件 $lines = array_map('str_getcsv', file('data.c ...
  2. php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法

    以下是对php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法进行了详细的分析介绍,需要的朋友可以过来参考下 date.csv:"ID" "NAME" &quo ...
  3. php使用fgetcsv读取csv文件出现乱码的解决方法

    这篇文章主要介绍了php使用fgetcsv读取csv文件出现乱码的解决方法,实例分析了造成乱码的原因与对应的解决方法,并给出了Linux平台下的乱码解决方法,需要的朋友可以参考下 本文实例讲述了php使用fgetcsv读 ...
  4. java读取csv文件内容示例代码

    这篇文章主要介绍了java读取csv文件内容的示例,大家参考使用 package com.huateng.readcsv; import java.io.BufferedReader; import java.io.Fi ...
  5. java读取csv文件示例分享(java解析csv文件)

    这篇文章主要介绍了java读取csv文件示例,这个java解析csv文件的例子很简单,下面直接上代码,大家参考使用吧 import java.io.*; import java.util.*; public class ...
  6. c语言读取csv文件和c++读取csv文件示例分享

    这篇文章主要介绍了c语言读取csv文件和c++读取csv文件示例,需要的朋友可以参考下 C读取csv文件 #include <stdio.h> #include <string.h> char * ...
  7. IE下JS读取xml文件示例代码

    JS读取xml文件具体步骤为:创建DOM对象.加载xml文件(仅适用于IE)附示例代码,感兴趣的朋友可以参考下,希望对大家有所帮助 使用JS读取xml文件,这里暂只考虑IE浏览器 step1 创建DOM对象 functi ...
  8. firefox中JS读取XML文件

    firefox中JS读取XML文件 在网上搜"firefox中JS读取XML文件"的方法,找了半天,好多都是问了没人答的.看到一堆程序员在抱怨firefox:"除了累死程序员没什么好处.&q ...
  9. php读取csv文件并输出的方法

    这篇文章主要介绍了php读取csv文件并输出的方法,涉及php中fgetcsv函数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了php读取csv文件并输出的方法.分享给大家供大家参考.具体实现方法 ...
  10. java读取csv文件和写csv示例分享

    这篇文章主要介绍了JAVA对CSV格式文本数据处理后再保存成新CSV格式文本的模板,可以学习到java读取csv文件和写csv的方法,需要的朋友可以参考下 import java.io.BufferedReader; i ...
  11. go语言读取csv文件并输出的方法

    这篇文章主要介绍了go语言读取csv文件并输出的方法,实例分析了go语言操作csv文件的技巧,需要的朋友可以参考下 本文实例讲述了go语言读取csv文件并输出的方法.分享给大家供大家参考.具体实现方法如下: packag ...
  12. python读取csv文件示例(python操作csv)

    这篇文章主要介绍了python读取csv文件示例,这个示例简单说明了一下python操作csv的方法,需要的朋友可以参考下 import csv for line in open("test.csv" ...
  13. 基于PHP读取csv文件内容的详解

    本篇文章是对PHP读取csv文件的内容进行了详细的分析介绍,需要的朋友参考下 一次性读取csv文件内所有行的数据 <?php $file = fopen('windows_2011_s.csv','r'); whi ...
  14. PHP读取csv文件内容的方法详解

    PHP读取csv文件的内容的方法. 一次性读取csv文件内所有行的数据 <?php $file = fopen('windows_2011_s.csv','r'); while ($data = fgetcsv($ ...
  15. JS读取XML文件示例代码

    读取XML文件的方法有很多,在本文为大家详细介绍下使用js是如何做到的,感兴趣的朋友可以参考下本文 //读取XML文件 function loadXML(xmlFile) { var xmlDoc; if (window ...
  16. C#读取csv格式文件的方法

    这篇文章主要介绍了C#读取csv格式文件的方法,包括针对csv文件操作的规则,实例代码部分包含了数据有效性验证及行列验证等内容,逻辑严谨,具有一定的参考借鉴价值,需要的朋友可以参考下 本文实例讲述了C#读取csv格式文件 ...
  17. 可以读取EXCEL文件的js代码第1/2页

    js读取 EXCEL 文件 的实现代码,比较全了大家可以自行测试了. 首页给个有中文说明的例子,下面的例子很多大家可以多测试. <script language="javascript" typ ...
  18. PHP按行读取.处理较大CSV文件的代码实例

    这篇文章主要介绍了PHP按行读取.处理较大CSV文件的代码实例,需要的朋友可以参考下 对于数百万条数据量的CSV文件,文件大小可能达到数百M,如果简单读取的话很可能出现超时或者卡死的现象. 为了成功将CSV文件里的数据导 ...
  19. php操作csv文件代码实例汇总

    这篇文章主要介绍了php操作csv文件代码实例汇总,本文给出6个操作CSV文件的代码实例,包括读取.写入.读取指定区间等,需要的朋友可以参考下 1.读取csv数据, 输出到sales.csv文件中: $sales = a ...