JQuery map() für eine HTML-Tabelle - Hilfe benötigt

Question

ich eine HTML-Tabelle, die wie folgt aussieht:

Der Benutzer eines der Textfelder aktualisieren und aus dem Aufklappmenü auswählen.
Sobald er seine Aktionen abgeschlossen hat, müssen die Daten über Ajax an den Server gesendet werden.
Es ist akzeptabel, alle Werte zu senden (nicht nur die, die sich geändert haben).

Benötigen Sie Hilfe beim Erstellen der JSON-Zeichenfolge für eine Ajax-Transaktion.
(Beachten Sie, dass die Beschreibung Spalte entweder ein String, Textbox oder ein Drop-Down zusätzlich sein kann die Dropdown-Listen nicht die gleichen Optionen enthalten.)

Die Struktur I wie folgt aussieht Karte versucht:

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

Vielen Dank, wenn Karte kann es nicht tun, bin ich offen für andere Optionen.

glücklich sein und das Leben genießen ;-)

Beitrag Akzeptanz Anmerkung:
Es gibt eine verborgene Spalte zwischen dem Merkmal und der Beschreibung. Aus diesem Grund richten sich die Indizes in der Antwort auf Zellen [2] und Zellen [5].

Answer 1

Dies sollte es für Sie tun.

Es wählt die Zeilen aus, nimmt eine .slice() von allen außer der ersten, dann ruft .map(), um Ihr Array zu erstellen. Die .get() zieht tatsächlich das Array aus dem jQuery-Objekt.

Inside .map(), ich verwendete DOM API-Eigenschaften und Methoden, da es in diesem Fall nur ein wenig einfacher (und schneller) schien.

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(); 

Wenn Sie es wissen, werden keine Leerzeichen in der sechsten Zelle (Bemerkung) sein, können Sie diese Zeile:

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

... dazu:

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

---

EDIT: Als eine Randnotiz, wenn Sie in der Lage, den HTML-Code zu ändern, würde ich die erste Zeile in einem 01 umhüllenElement, dann die restlichen Zeilen in einem <tbody> Element, um die verschiedenen Teile der Tabelle zu trennen.

Dann könnten Sie dies ändern:

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

... dazu:

$('#FeatureListTable > tbody > tr') 

... Ihnen die Möglichkeit, alle auszuwählen mit Ausnahme der Kopfzeile, ohne die Notwendigkeit für eine Trennen Sie .slice() Aufruf, um die Kopfzeile aus dem Set zu entfernen.