ajax cvs解析,用 JavaScript 解析 .csv 文件

First Step:

$.ajax({

url: 'csv_data.csv',

dataType: 'text',

}).done(successFunction);

Second Step:Converting a CSV File Into an HTML Table

function successFunction(data) {

var allRows = data.split(/\r?\n|\r/);

var table = '

for (var singleRow = 0; singleRow < allRows.length; singleRow++) {

if (singleRow === 0) {

table += '';

table += '

';

} else {

table += '

';

}

var rowCells = allRows[singleRow].split(',');

for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {

if (singleRow === 0) {

table += '

';

table += rowCells[rowCell];

table += '

';

} else {

table += '

';

table += rowCells[rowCell];

table += '

';

}

}

if (singleRow === 0) {

table += '

';

table += '

';

table += '

';

} else {

table += '';

}

}

table += '

';

table += '

';

$('body').append(table);

}

Third Step: Adding Styles to the HTML Table

table {

margin: 0 auto;

text-align: center;

border-collapse: collapse;

border: 1px solid #d4d4d4;

}

tr:nth-child(even) {

background: #d4d4d4;

}

th, td {

padding: 10px 30px;

}

th {

border-bottom: 1px solid #d4d4d4;

}

result: