Automatisch sortierte HTML-Tabellen aus einer Textdatei generieren?

Question

Update

Ich habe es geschafft, meine Tabelle mit Gabel Vorschlag mit ein paar kleineren Problemen.

Dies war besonders nützlich, da mein Kollege nur eine CSV-Datei in Excel bearbeiten muss.

Aus Präsentationsgründen möchte sie nun, dass der Tisch wie folgt aussieht:

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

Es gibt zwei thead Einträge oder vielleicht zwei Tabellen, aber die .CSV-Datei wäre immer noch:

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

Fragen

1. Wie kann ich die CSV-Datei so parsen, dass sie nach dem zweiten Komma abbricht, und dann eine neue Tabelle oder einen neuen Kopf-/Teilsatz innerhalb derselben Tabelle erstellen?

---

Es gibt eine HTML-Tabelle, die ich gerne mit so wenig Aufwand wie möglich für die Person, die die Daten ausfüllt, erstellt haben möchte.

Die Tabelle sieht wie folgt aus (Proxy-Beispiel):

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

Derzeit ist die Tabelle in Standard-HTML erstellt, und ich verwende CSS und jQuery, um ihr bestimmte Farben bzw. "Zebrastreifen" zu geben. Die alphabetische Sortierung wurde manuell vorgenommen.

Die Person, der ich den Code übergebe, möchte den HTML-Code jedoch nicht bearbeiten, wenn der Code bereits steht. Sie möchte lieber eine Textdatei bearbeiten, in der sie schreiben/bearbeiten kann (dies war nur ein Vorschlag eines Freundes):

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

Das Javascript sollte dann diese Quelldatei aufgreifen, eine Tabelle erzeugen, in der die einzelnen Spalten automatisch alphabetisch sortiert und dann mit dem CSS-Layout zebragestreift werden.

Fragen

1. Ich habe das jQuery-Plug-in. Was bräuchte ich sonst noch, um die Tabellen tatsächlich zu generieren?
2. Würden Sie empfehlen, die oben genannte Wörterbuchstruktur für die Quelldatei zu verwenden oder vielleicht eine CSV-Datei?
3. Zur Veranschaulichung: Was passiert, wenn ich mit dem Szenario konfrontiert werde, dass {Tomato: Fruit, Tomato: Veggies...} . Gibt es eine Abhilfe für diesen Fall?

Das mag übertrieben erscheinen, aber es ist etwas, das ich tun muss.

Answer 1

Für die einfache Tabellenerstellung mit jQuery empfehle ich jQuery DatenTabellen . Es verfügt über integrierte Sortierfunktionen, Filterung, Zebrafärbung, Paging usw.

Sie können seine API verwenden, um die JSON-Daten abzurufen und die Tabelle automatisch zu erstellen: AJAX-Beispiel .

Answer 2

Sie könnten das folgende jQueryPlugin ausprobieren, das eine csv-Datei einliest und eine Tabelle erstellt. Und csv's können von MS Excel aus jeder Tabelle exportiert werden. Narr normaler Benutzer...

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

Answer 3

Sie sind gut mit jQuery. Das Zebra-Streifenmuster kann leicht mit CSS erreicht werden:

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

(Tut mir leid, wenn Sie das schon wussten, ich konnte es aus Ihrem Beitrag nicht erkennen)

Zu den Daten: Wenn es Ihnen gelingt, die "der andere Kerl" JSON zu schreiben, kommen Sie gut weg.

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

Verwenden Sie nun jQuery, um diese Karte zu durchlaufen, sortieren Sie sie mit jQuery und legen Sie sie in die Tabelle. Als Referenz, siehe este .
Wie Sie sehen, können Sie Ihre eigene Vergleichsfunktion schreiben, so dass Sie Ihren speziellen Fall (Fall 3 in Ihrem Beitrag) auf jede beliebige Weise behandeln können.

Editar:

Okay, es ist also nicht ganz so einfach, wie ich es mir vorgestellt habe - aber sehen Sie selbst: Hier ist ein Beispiel dafür, wie es funktionieren könnte. data ist der Einfachheit halber hier drin. Sie könnte in eine separate Datei ausgelagert und über <script src=...> wie oben erwähnt.

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

Dies setzt voraus, dass Sie eine (wahrscheinlich leere) Tabelle mit der id the_table in Ihrem Dokument.