csv文件转换成html,jQuery 把CSV文件数据转换为HTML表格(Bootstrap Table)
JavaScript
语言：
JaveScriptBabelCoffeeScript
确定
"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 "" + value + "" + element + ">";
}
function toHTML(arr) {
var sTable = "
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) ? "
" : "");});
return sTable + "
";}
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);