jQuery 把CSV文件数据转换为HTML表格(Bootstrap Table)

jQuery, localStorage, window, angular. CSV-Graph webpage, where it converts the CSV file into a HTML table (data structure).

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3149
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";
(function defineVarsFromClassName() {
    var needVar = $("[class]"),
        definedVars = "",
        i,
        ii,
        classes,
        sVarName,
        sClassName,
        $this,
        $us;
    for (i = 0; i < needVar.length; i++) {
        $this = $(needVar[i]);
        classes = $this.attr("class").split(" ");
        for (ii = 0; ii < classes.length; ii++) {
            sClassName = $.trim(classes[ii]);
            if (sClassName.length > 0) {
                $us = $("." + sClassName);
                sVarName = "$" + sClassName.replace(/\-/g, "_");
                if (typeof window[sVarName] === "undefined") {
                    window[sVarName] = $us;
                    definedVars += " " + sVarName;
                }
            }
        }
    }
    return definedVars;
})();

// INCLUDE FROM HERE - csvToHtml

/**
 * Converts a CSV string to object with rows and header
 * @param   {String} sCSV    A CSV string
 * @param   {Object} options {
 *                         seperator: string "The CSV col selerator" [";"]
 *                         hasHeader: bool [true]
 *                         headerPrefix: string ["COL]  }
 * @returns {Object} {
 * headers: array of headers,
 * rows: array of rows (including header)
 *  }
 */
function convertToArray(sCSV, options) {
    var result = {
            headers: null,
            rows: null
        },
        firstRowAt = 0,
        tds,
        first,
        cols;
    options = options || {};
    options = $.extend(options, {
        seperator: ";",
        hasHeader: true,
        headerPrefix: "COL"
    });

// Create header
    tds = sCSV.split("\x0a");
    first = tds[0].split(options.seperator);
    if (options.hasHeader) {
        result.headers = first;
        result.headers = result.headers.map(function(header) {
            return header.replace(/\//g, "_");
        });
        firstRowAt = 1;
    } else {
        result.headers = first.map(function(header, i) {
            return options.headerPrefix + i;
        });
    }

// Create rows
    cols = result.headers.length;
    result.rows = tds.map(function(row, i) {
        return row.split(options.seperator);
    });
    return result;
}

function tag(element, value) {
    return "<" + element + ">" + value + "</" + element + ">";
}

function toHTML(arr) {
    var sTable = "<table class=\"table table-striped\"><thead>";
    arr.map(function(row, i) {
        var sRow = "";
        row.map(function(cell, ii) {
            var tagname = (i === 0) ? "th" : "td";
            sRow += tag(tagname, cell);
        });

sTable += tag("tr", sRow) + ((i === 0) ? "</thead><tbody>" : "");
    });
    return sTable + "</tbody></table>";
}

function csvToHtml($source, $output, options) {
        var sCSV = $source.val(),
            result = convertToArray(sCSV, options || {});
        $output.html(toHTML(result.rows));
    }
    // INCLUDE TO HERE - csvToHtml

$source.on("change keyup touchend", function() {
    csvToHtml($source, $output);
});

// This is how you can use the code
csvToHtml($source, $output);

编译

CSS

HTML

<div class="container" ng-app="myApp" ng-controller="Example">
		<div class="jumbotron">
						<h2>CSV to HTML table</h2>
						<p>As I visit a company website allowing me to download a <code>CSV</code> file (Comma Seperated Value), I find myself thinking: Why do they not draw a graph of the data? This is the first part on my way to make a CSV-Graph webpage, where I in this part convert the CSV file into a data structure. <br />And just to see if it is working I convert the array to a Boostrap table. <br />You may change the CSV data, and also feel free to reuse the <code>csvToHtml</code> function build in javascript.</p>
		</div>
		<div class="container">
				<div class="row">

<div class="col-md-12">
								<textarea cols="30" rows="10" class="source">Kundenavn;Opstillingsadressenr.;Navn;Adresse;Postnr;By;År;Måned;Waste code;Waste code beskrivelse;Mængde/kg
Kundenavn;12345678;Kundenavn;Adresse;postnr;Bynavn;2015;1;E03;Forbrændingsegnet;220
Kundenavn;12345678;Kundenavn;Adresse;postnr;Bynavn;2015;2;E03;Forbrændingsegnet;210
Kundenavn;12345678;Kundenavn;Adresse;postnr;Bynavn;2015;3;E03;Forbrændingsegnet;210
Kundenavn;12345678;Kundenavn;Adresse;postnr;Bynavn;2015;4;E03;Forbrændingsegnet;240
Kundenavn;12345678;Kundenavn;Adresse;postnr;Bynavn;2015;5;E03;Forbrændingsegnet;240
Kundenavn;12345678;Kundenavn;Adresse;postnr;Bynavn;2015;6;E03;Forbrændingsegnet;220</textarea>
						</div>
						<div class="col-md-12">
								<div class="output"></div>
						</div>
						<div class="col-md-12"></div>
				</div>
		</div>
</div>

jQuery, localStorage, window, angular. CSV-Graph webpage, where it converts the CSV file into a HTML table (data structure).

编辑器支持Emmet

快捷键

jQuery, localStorage, window, angular. CSV-Graph webpage, where it converts the CSV file into a HTML table (data structure).

HTML5+jQuery.waypoints旅行者的时间表页面模板

HTML5 Audio+Matter.js 随音乐节奏而动的踩单车杂技表演

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：