将 .CSV 转换为 HTML 表格答案

【问题标题】：Convert .CSV to HTML Table将 .CSV 转换为 HTML 表格
【发布时间】：2014-06-14 14:51:05
【问题描述】：

我想在 jQuery 中将 .csv 文件转换为 HTML 表格。为此，我使用了一个名为 CSVToTable 的 jQuery 插件。

我在代码中的使用方式如下：

我在<div id="ItemTable"></div> 上拨打了.CSVToTable('path/to/file.csv')：

$("#ItemTable").CSVToTable('ItemDatabase.csv', {
  loadingImage: 'img/loading.gif',
  startLine: 0
});

一切似乎都正常工作，还有 loading.gif（包含在下载中）。

我的第一次尝试是在 ItemDatabase.csv 上运行它，这是一个包含大约 .csv 的 .csv。 350 行。 它一直在加载和加载，15 分钟后，我尝试了一个包含 5 行的较小文件。没什么区别。

我查看了their website with a demo的源码，运行良好，替换了代码，但没什么区别。

如果有人能告诉我我做错了什么，那将非常有帮助。

注意：我检查了文件路径，一切都正确初始化了

编辑：对于@sakir，我的 .csv 文件的前 4 行：

Name,Tier,Kind,Lvl,mDam,xDam,HR,MR,SD,LS,MS,XB,LB
Depressing Bow,Depressing,Bow,1,0,0,NONE,NONE,NONE,NONE,NONE,NONE,NONE
Oak Wood Bow,Basic,Bow,1,4,6,NONE,NONE,NONE,NONE,NONE,NONE,NONE
Birch Wood Bow,Basic,Bow,6,6,10,NONE,NONE,NONE,NONE,NONE,NONE,NONE

【问题讨论】：

有javascript错误吗？
你有没有给任何标题
@silk_route11 它抛出这个错误：XMLHttpRequest cannot load file:///G:/Webs/WynnTools/test.csv. Received an invalid response. Origin 'null' is therefore not allowed access. /G:/Webs/WynnTools/index.html:1
@sakir 是的，它有一个标题
如果你有标题，我猜起始行应该是 1

标签： javascript jquery html csv

【解决方案1】：

您不能使用本地文件系统中的文件。请在网络服务器上复制您的文件，并在 .CSVToTable(url_file) 中提供该文件的 url。

【讨论】：

我将尽快尝试，感谢您的快速回复！现在我将其标记为答案。
@Pranav Maniar 我试过这个（使用演示中的 .csv 文件），但没有奏效。它不断给出错误XMLHttpRequest cannot load file:///G:/Webs/WynnTools/data/ItemDatabase_clean.csv. Received an invalid response. Origin 'null' is therefore not allowed access. 知道解决方法是什么吗？ D：
@Semx11 .. 请尝试使用 web-server url 访问 html 页面。例如，如果 index.html 文件保存在 web-servler 的 csvtohtml 文件夹中并且服务器正在运行端口 80 然后使用http://localhost/csvtohtml/index.html 之类的 url 访问它。如果您不这样做，而是通过双击直接运行文件，那么您将收到上述错误...

【解决方案2】：

试试这种方式，伙计。但一定要加载所需的 javascript 和 csv 文件的路径。如果它适用，请通知我。祝你好运

csv 文件结构(test.csv)

Name,Tier,Kind,Lvl,mDam,xDam,HR,MR,SD,LS,MS,XB,LB
Depressing Bow,Depressing,Bow,1,0,0,NONE,NONE,NONE,NONE,NONE,NONE,NONE
Oak Wood Bow,Basic,Bow,1,4,6,NONE,NONE,NONE,NONE,NONE,NONE,NONE
Birch Wood Bow,Basic,Bow,6,6,10,NONE,NONE,NONE,NONE,NONE,NONE,NONE

转换 csv 2 表格的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery CSVToTable</title>

    <link rel="stylesheet" href="css/csvtable.css" type="text/css" />

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.csvToTable.js"></script>


</head>
<body>
 CSV To Table:<br>
<div id="CSVTable">

</div>

    <script type="text/javascript">

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

</body>
</html>

【讨论】：

谢谢，但这不是问题所在。您可能从演示的源代码中复制了这个，我已经检查过了。显然问题是这个插件不能使用本地文件，它需要一个 http://。感谢您的快速回复，遗憾的是我还不能为您的帖子投票，因为我今天注册了我的帐户，但我还没有获得所需的 15rep：/
没关系，但我已将您的 csv 文件用作本地文件，并且工作正常。你可以在这里看到快照i60.tinypic.com/29ndws6.png
您在网络服务器上使用过它吗？像本地主机？还是您在 Chrome/Firefox 中使用 file://？你用的是什么浏览器？
Mozila Firefox 27.0.1 与 localhost/csv2table/index.html @Semx11 等网络服务器
没错，一个网络服务器。我只是用 file:// 尝试它，它不起作用。我已经弄清楚了这个问题。它是不允许从文件访问文件的 Chrome（或 FireFox）。我必须使用“--allow-file-access-from-files”标志启动 Chrome，现在它可以工作了。我为我的“开发人员工作区”做了这个，但是当我发布它时，我将把它移到网络服务器上。或者其他的东西。我会看到 :3 感谢您的帮助 :)