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="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>

效果图：

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

赞 (0)

相关推荐

  • 在Python中利用Into包整洁地进行数据迁移的教程

    在Python中利用Into包整洁地进行数据迁移的教程

    动机 我们花费大量的时间将数据从普通的交换格式(比如CSV),迁移到像数组.数据库或者二进制存储等高效的计算格式.更糟糕的是,许多人没有将数据迁移到高效的格式,因为他们不知道怎么(或者不能)为他们的工具管理特定的迁移方法. 你所选择的数据格式很重要,它会强烈地影响程序性能(经验规律表明会有10倍的差距),以及那些轻易使用和理解你数据的人. 当提倡Blaze项目时,我经常说:"Blaze能帮助你查询各种格式的数据."这实际上是假设你能够将数据转换成指定的格式. 进入into项目 into

  • python中使用xlrd、xlwt操作excel表格详解

    python中使用xlrd、xlwt操作excel表格详解

    最近遇到一个情景,就是定期生成并发送服务器使用情况报表,按照不同维度统计,涉及python对excel的操作,上网搜罗了一番,大多大同小异,而且不太能满足需求,不过经过一番对源码的"研究"(用此一词让我觉得颇有成就感)之后,基本解决了日常所需.主要记录使用过程的常见问题及解决. python操作excel主要用到xlrd和xlwt这两个库,即xlrd是读excel,xlwt是写excel的库.可从这里下载https://pypi.python.org/pypi.下面分别记录python

  • Mysql 导入导出csv 中文乱码问题的解决方法

    导入csv: 复制代码 代码如下: load data infile '/test.csv' into table table_name fields terminated by ','  optionally enclosed by '"' escaped by '"' lines terminated by '\r\n' ignore 1 lines; 导csv: 复制代码 代码如下: SELECT * INTO OUTFILE '/test.csv'  FIELDS TERMIN

  • 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" />     <ti

  • js如何读取csv内容拼接成json

    js如何读取csv内容拼接成json

    目录 js 读取csv内容拼接成json 纯js读取txt,xlsx,csv,xls文件 js 读取csv内容拼接成json formdata对象上传了csv文件,读取文件内容拼接成json对象 var form = new FormData(); var files = $("#getfile")[0].files; var reader = new FileReader(); reader.readAsText( files[0],"gbk" ); //以文本格

  • node.js生成与读取csv文件方法详解

    nodejs使用object-to-CSV库生成csv文件 object-to-CSV是一个非常棒的库,可以使用nodejs将对象数组快速写入CSV文件. 当然,还有许多其他的库.只是俺发现这对于俺的一个项目非常有用,因为俺必须生成一个一次性的CSV文件,所以俺编写了这个小教程. 在更面向性能的应用程序中,使用基于流的库(如fast-csv)可能适合您的需要. npm install objects-to-csv 引入库: const ObjectsToCsv = require('object

  • JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)

    本文实例讲述了JS读取XML文件数据并以table形式显示数据的方法.分享给大家供大家参考,具体如下: 先看xml文件: <?xml version="1.0" standalone="yes"?> <student> <stuinfo> <stuName>张秋丽</stuName> <stuSex>女 </stuSex> <stuAge>18</stuAge>

  • 使用JS读取XML文件的方法

    由于项目上需要解析xml,于是各种百度,然后自己总结了下各个主流浏览器解析xml的方法,只能是很浅显的知道他的用法,但是还没有深层次的研究. 不同的浏览器对xml的解析方式不同,根据目前主流浏览器大致分三类: 第一类,ie祖宗: js 提供用于创建 Automation对象的方法,new ActiveXObject("Microsoft.XMLDOM") : 第二类:firefox,opera:用构造函数 DOMParser()实例化DOMParser对象,解析xml文本,并返回xml

  • php实现的读取CSV文件函数示例

    本文实例讲述了php实现的读取CSV文件函数.分享给大家供大家参考,具体如下: function read_csv($cvs) { $shuang = false; $str = file_get_contents($cvs); for ($i=0;$i<strlen($str);$i++) { if($str{$i}=='"') { if($shuang) { if($str{$i+1}=='"') { $str{$i} = '*'; $str{$i+1} = '*'; } e

  • php使用fgetcsv读取csv文件出现乱码的解决方法

    本文实例讲述了php使用fgetcsv读取csv文件出现乱码的解决方法.分享给大家供大家参考.具体分析如下: 一般来说在php中碰到乱码多半是编码问题,在这里我们实例分析了fgetcsv读取csv文件乱码原因所在与解决方法. 例子如下: 复制代码 代码如下: function get_csv_contents( $file_target ){  $handle  = fopen( $file_target, 'r');  while ($data = fgetcsv($handle, 1000,

  • go语言读取csv文件并输出的方法

    本文实例讲述了go语言读取csv文件并输出的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: package main import (     "encoding/csv"     "fmt"     "io"     "os" ) func main() {     file, err := os.Open("names.txt")     if err != nil {      

  • php读取csv文件并输出的方法

    本文实例讲述了php读取csv文件并输出的方法.分享给大家供大家参考.具体实现方法如下: <?php $row = 0; $j = 1; // Linea por la que quieres empezar $file = "name.txt"; //Nombre del fichero if (($handle = fopen($file, "r")) !== FALSE) { while (($data = fgetcsv($handle, "

  • IE下JS读取xml文件示例代码

    使用JS读取xml文件,这里暂只考虑IE浏览器 step1 创建DOM对象 复制代码 代码如下: function createDom() { var xmlDoc = null; try { //IE if (typeof arguments.callee.activeXString != 'string') { var versions = [ "MSXML2.DOMDocument.6.0", "MSXML2.DOMDocument.3.0", "M

随机推荐