通过从字段中删除引号,支持标题以及允许其他分隔符来改进csv文件阅读器

我希望我的文件在html中显示时没有引号。 意思是每个单词都有引号。 我想把它带走。 我还想添加一个标签,以便我可以有一个标题。 而且我不想只用逗号分隔,我也想要其他分隔符如|

这是我的代码:

CSS:

table {border:1px solid #ccc; } table th {background-color:#F7F7F7; 颜色:#333; font-weight:bold; table th,table td {padding:5px; border-color:#ccc; }

使用Javascript:

$(function () { $("#upload").bind("click", function () { var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/; if (regex.test($("#fileUpload").val().toLowerCase())) { if (typeof (FileReader) != "undefined") { var reader = new FileReader(); reader.onload = function (e) { var table = $(""); var rows = e.target.result.split("\n"); for (var i = 0; i < rows.length; i++) { var row = $(""); var cells = rows[i].split(","); for (var j = 0; j < cells.length; j++) { var cell = $("
"); cell.html(cells[j]); row.append(cell); } table.append(row); } $("#dvCSV").html(''); $("#dvCSV").append(table); } reader.readAsText($("#fileUpload")[0].files[0]); } else { alert("This browser does not support HTML5."); } } else { alert("Please upload a valid CSV file."); } }); });

HTML:

   

所以我看了一下你的代码,然后用它来制作一个jsfiddle。

这是完全的小提琴

 $(function() { $("#upload").bind("click", function() { var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/; if (regex.test($("#fileUpload").val().toLowerCase())) { if (typeof(FileReader) != "undefined") { var reader = new FileReader(), table = $(""), separator = ',', rows, rowLength; reader.onload = function(e) { rows = e.target.result.split(/[\r\n|\n]+/); rowLength = rows.length; for (var i = 0; i < rowLength; i++) { var row = $(""), cells = rows[i].split(separator), cellLength = cells.length, cell; for (var j = 0; j < cellLength; j++) { // Special case for the first row cell = (i === 0) ? $("').html(row); } table.append(row); } $("#dvCSV").html(''); $("#dvCSV").append(table); } reader.readAsText($("#fileUpload")[0].files[0]); } else { alert("This browser does not support HTML5."); } } else { alert("Please upload a valid CSV file."); } }); });
") : $(""); cell.html(cells[j]); row.append(cell); } // Special case for first row (thead) if (i === 0) { row = $('
 a { display: block; } table { border: 1px solid #ccc; } table th { background-color: #F7F7F7; color: #333; font-weight: bold; } table th, table td { padding: 5px; border-color: #ccc; } 
  Dummy CSV   
 $(function() { $("#upload").bind("click", function() { var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/; if (regex.test($("#fileUpload").val().toLowerCase())) { if (typeof(FileReader) != "undefined") { var reader = new FileReader(), table = $(""), separator = ',', rows, rowLength; reader.onload = function(e) { rows = e.target.result.split(/[\r\n|\n]+/); rowLength = rows.length; for (var i = 0; i < rowLength; i++) { var row = $(""), cells = rows[i].split(separator), cellLength = cells.length, cell; for (var j = 0; j < cellLength; j++) { // Special case for the first row cell = (i === 0) ? $("').html(row); } table.append(row); } $("#dvCSV").html(''); $("#dvCSV").append(table); } reader.readAsText($("#fileUpload")[0].files[0]); } else { alert("This browser does not support HTML5."); } } else { alert("Please upload a valid CSV file."); } }); });
") : $(""); cell.html(cells[j]); row.append(cell); } // Special case for first row (thead) if (i === 0) { row = $('
 a { display: block; } table { border: 1px solid #ccc; } table th { background-color: #F7F7F7; color: #333; font-weight: bold; } table th, table td { padding: 5px; border-color: #ccc; } 
  Dummy CSV