从文本文件生成自动排序的 HTML 表格？

Question

更新

我设法使用 gabel's 建议生成了我的表格，但存在一些小问题。

这特别有用，因为我的同事只需要在 Excel 中编辑一个 .CSV 文件。

由于演示的原因，她现在希望表格如下所示：

------------------------------
| FRUITS       | VEGGIES     |
------------------------------
| Banana       | Potato      |
------------------------------
| Cherry       | Pumpkin     |
------------------------------
| Orange       | Okra        |
------------------------------
| MEATS        | CARBS       |
------------------------------
| Chicken      | Bread       |
------------------------------
| Beef         | Rice        |
------------------------------
| Pork         |             |
------------------------------

有两个 thead 条目或者可能是两个表，但 .CSV 文件仍然是：

FRUITS,VEGGIES,MEATS,CARBS
Banana,Potato,Chicken,Bread
...

问题

1. 如何解析在第二个逗号之后会中断的 CSV 文件，然后在同一个表中创建一个新表或新的标题/正文集？

---

我想为实际填写数据的人尽可能少地生成一个 HTML 表格。

表格如下所示（代理示例）：

------------------------------
| FRUITS       | VEGGIES     |
------------------------------
| Banana       | Potato      |
------------------------------
| Cherry       | Pumpkin     |
------------------------------
| Orange       | Okra        |
------------------------------

目前，表格是在标准 HTML 中完成的，我正在使用 CSS 和 jQuery 分别为其赋予特定的颜色和“斑马”条纹。字母排序是手动完成的。

但是，在代码设置到位后，我将其交给的人不想编辑 HTML。她宁愿编辑一些她可以编写/编辑的文本文件（这只是朋友的建议）：

{Banana: Fruit, Potato: Veggies, Okra: Veggies... }

然后 Javascript 应该选择这个源文件，生成一个表格，其中各个列自动按字母顺序排序，然后使用 CSS 布局进行斑马条纹。

问题

1. 我有 jQuery 插件。实际生成表格还需要什么？
2. 您是否建议对源文件或 CSV 文件使用上述字典结构？
3. 为了争论，发生在我面对{Tomato: Fruit, Tomato: Veggies...}的场景时。这种情况有解决办法吗？

这似乎有点矫枉过正，但这是我需要完成的事情。

Answer 1

为了使用 jQuery 轻松构建表格，我建议 jQuery DataTables。它具有内置的排序功能，以及过滤、斑马着色、分页等功能。

您可以使用它的 API 来检索 JSON 数据并自动构建表：AJAX example。

Answer 2

您可以签出以下 jQueryPlugin，它读取 csv 文件并创建一个表。并且 csv 可以通过 MS Excel 从任何 fool 普通用户导出...

http://code.google.com/p/jquerycsvtotable/

Answer 3

你对 jQuery 很好。使用 CSS 可以轻松实现斑马条纹：

#the_table_id tr:nth-child(odd) {
  background-color: red;
}
#the_table_id tr:nth-child(even) {
  background-color: blue;
}

（对不起，如果您已经知道，从您的帖子中无法真正看出）

关于数据：如果你能设法让“其他人”编写 JSON，你就轻松了。

var data = {
  "Banana": "Potatoe",
  "Tomatoe": "Banana",
  //...
  "Something": "else"
}

现在使用 jQuery 遍历该地图，使用 jQuery 对其进行排序并放入表中。作为参考，请参阅this。
如您所见，您可以编写自己的比较函数，因此您可以以任何您喜欢的方式处理您的特殊情况（帖子中的案例 #3）。

编辑：

好的，所以它并不像我想象的那么简单 - 但是，你自己看看吧： 这是一个如何工作的示例。 data 在这里是为了方便。如上所述，可以将其导出到单独的文件中，并通过<script src=...> 包含在内。

  var data = {
    "Banana": "Position 2",
    "Apple": "Position 1",
    "Cherry": "Position 3"
  };

  var keys = Array();

  $(function() {
    // Extract keys for sorting
    $.each(data, function(index, item) {
      keys.push(index);
    });
    // Sort keys
    keys.sort(function(a, b) {
      return a > b;
    });
    // Traverse sorted keys and put data into table
    $.each(keys, function(index, item) {
      $("#the_table").append("<tr><td>"+item+"</td><td>"+data[item]+"</td></tr>");
    });
  });

这假设您的文档中有一个（可能是空的）表，id 为 the_table。