JQuery map () для HTML-таблицы - нужна помощь

Question

У меня есть HTML-таблица, которая выглядит следующим образом:

Пользователь может обновить любое из текстовых полей и выбрать из раскрывающихся списков.После того, как он завершил свои действия, данные должны быть отправлены через ajax на сервер.Допустимо отправлять все значения (не только те, которые изменились).

Нужна помощь в построении строки JSON для транзакции ajax.(Обратите внимание, что столбец описания может быть строкой, текстовым полем или раскрывающимся списком, кроме того, раскрывающиеся списки не содержат одинаковые параметры.)

Структура, которую я пытаюсь отобразить, выглядит следующим образом:

[
  {  id: "1" , desc: "Lenovo" , remark: "International" },
  {  id: "2" , desc: "Hard Disks", remark: ""           },
  {  id: "3" , desc: "T400", remark: "Old Model"        },
  {  id: "4" , desc: "Poker", remark: ""                }
]

Большое спасибо, если карта не может этого сделать, я открыт для других вариантов.

Будь счастлив и наслаждайся жизнью; -)

Сообщение о приемке: Между функцией и описанием есть скрытый столбец.Вот почему индексы в ответе относятся к ячейкам [2] и ячейкам [5].

Answer 1

Это должно сделать это для вас.

Он выбирает строки, принимает .slice() всего, кроме первого, затем вызывает .map() для создания массива. .get() фактически вытаскивает массив из объекта jQuery.

Внутри .map() я использовал свойства и методы DOM API, так как в этом случае это казалось немного проще (и быстрее).

var ProductFeatures = $('#FeatureListTable tr').slice(1).map(function() {
    return {
        id: this.id,
        desc:this.cells[ 2 ].innerHTML,
        remark:this.cells[ 5 ].getElementsByTagName('input')[0].value
    }
}).get();

Если вы знаете, что в 6-й ячейке не будет пробелов (примечание), вы можете изменить эту строку:

remark:this.cells[ 5 ].getElementsByTagName('input')[0].value

... на это:

remark:this.cells[ 5 ].firstChild.value

---

РЕДАКТИРОВАТЬ: В качестве примечания: если вы можете изменить HTML, я бы обернул первую строку в элемент <thead>, а затем оставшиеся строки в элементе <tbody> разделите различные части таблицы.

Тогда вы можете изменить это:

$('#FeatureListTable tr').slice(1)

... на это:

$('#FeatureListTable > tbody > tr')

... дает вам возможность выбрать все, кроме строки заголовка, без необходимости отдельного вызова .slice() для удаления заголовка из набора.