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
...

问题

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

我希望生成一个HTML表格，尽可能少地为实际填写数据的人工作。

该表看起来像这样（代理示例）：

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

目前，该表是用标准HTML完成的，我使用CSS和jQuery分别给它特定的颜色和'斑马'条纹。字母排序已手动完成。

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

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

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

问题

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

这看起来有点矫枉过正，但这是我需要完成的事情。

Answer 1

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

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

Answer 2

你可以签出以下jQueryPlugin，它读入csv文件并创建一个表。 csv可以通过MS Excel从任何傻瓜普通用户导出......

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。

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

3 个答案:

编辑：