Generating autosorted HTML tables from text file?

Update

I managed to get my table generated using gabel's suggestion with a few minor issues.

This was especially useful since my colleague only has to edit a .CSV file in Excel.

Due to presentation reasons, she now wants the table to look like so:

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

There are two thead entries or perhaps two tables but the .CSV file would still be:

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

Questions

1. How would I parse the CSV file that it would break after the second comma and then create a new table or a new header/body set within the same table?

There's a HTML table I'd like to have generated with as little work possible for t开发者_如何学编程he person actually filling in the data.

The table looks like this (proxy example):

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

Currently, the table is done in standard HTML and I'm using CSS and jQuery to give it specific colours and 'zebra'-striping, respectively. The alphabetical sorting has been done manually.

However, with the code set in place the person I'm handing it over to does not want to edit the HTML. She'd rather edit some text file where she can write/edit (this was just a suggestion from a friend):

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

The Javascript should then pick up this source file, generate a table where the individual columns are automatically sorted alphabetically and then zebra-striped using the CSS layout.

Questions

1. I've got the jQuery plug-in. What else would I need to actually generate the tables?
2. Would you recommend using the above dictionary structure for the source file or perhaps a CSV file?
3. For the sake of argument, happens when I face the scenario of {Tomato: Fruit, Tomato: Veggies...}. Is there a workaround for this case?

This may seem like overkill, but it's something I need to get done.

For easy table building with jQuery, I suggest jQuery DataTables. It have sorting functionality built-in, plus filtering, zebra coloring, paging, and so on.

You can use its API to retrieve the JSON data and build the table automatically: AJAX example.

You could checkout the following jQueryPlugin which reads in a csv File and creates a table. And csv's can be exported by MS Excel from any fool normal user...

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

You're fine with jQuery. The zebra-striping can easily be achieved using CSS:

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

(Sorry if you knew that already, couldn't really tell from your post)

Concerning the data: If you can manage to get "the other guy" to write JSON, you get off easy.

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

Now use jQuery to traverse that map, sort it with jQuery and put it into the table. As a reference, see this.
As you can see, you can write your own comparison function, so you can handle your special case (case #3 in your post) in any way you like.

Edit:

Okay, so it's not quite as straight forward as I imagined it to be - but, well see for yourself: Here's an example of how this could work. data is in here for convenience. It could be sourced out in to a separate file and be included via <script src=...> as mentioned above.

  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>");
    });
  });

This assumes, you have an (probably empty) table with id the_table in your document.