以HTML格式显示CSV文件

Question

我正在尝试将带有标题的本地CSV文件导入到本地HTML文件中,然后该文件将在浏览器中显示为表格.

我没有长时间学习HTML和JavaScript,所以我对导入和转换知之甚少.我需要的是一些建议或可能是描述我需要的功能的基本脚本.欢迎解释和建议!

这是csv文件的一个示例:

    heading1,heading2,heading3,heading4,heading5
    value1_1,value1_2,value1_3,value1_4,value1_5
    value2_1,value2_2,value2_3,value2_4,value2_5
    value3_1,value3_2,value3_3,value3_4,value3_5
    value4_1,value4_2,value4_3,value4_4,value4_5
    value5_1,value5_2,value5_3,value5_4,value5_5

这就是我想要显示它的方式:

http://jsfiddle.net/yekdkdLm

Answer 1

<div id="CSVTable"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//jquerycsvtotable.googlecode.com/files/jquery.csvToTable.js"></script>

<script>
$(function() {
  $('#CSVTable').CSVToTable('your_csv.csv');
});
</script>

您可以使用 jquery.csvToTable.js 在 html 中显示 csv 文件

Answer 2

获取外部文件。

你必须xmlHttpRequest为此使用。使用 jQuery（包括 jQuery 库）进行简化。

您需要在 Apache 等本地服务器中运行 HTML 文件，Chrome 等浏览器不允许xmlHttp使用file://url。

  $.ajax({
    type: "GET",
    url: "words.txt",
    dataType: "text",
    success: parseTxt
  });

使用成功回调来处理数据

parseTxt是读取文件内容的函数，并且passed. 然后，您可以编写代码parseTxt以将文本处理为字符串。

function parseTxt(text){
  var rows=text.split('\n');

  //for each row
  //cols=rows[i].split(',');
}

我想这应该足以让你开始。

如何使用 JavaScript 从服务器读取文本文件？

Shadow Wizard您甚至可以使用尝试回答上述问题iframes。

XMLHttpRequest可以在没有 jQuery 的情况下制作RAW ，如下所示