Создание автоматически отсортированных таблиц HTML из текстового файла?

Question

Обновление

Мне удалось сгенерировать мою таблицу с помощью предложения Габеля с несколькими незначительными проблемами.

Это было особенно полезно, поскольку мой коллега должен редактировать только файл .CSV в Excel.

В связи с презентацией она теперь хочет, чтобы стол выглядел так:

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

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

Предполагается, что в вашем документе есть (вероятно, пустая) таблица с идентификатором the_table.