用于 html 表的 JQuery map() - 需要帮助

Question

我有一个如下所示的 HTML 表：

用户可以更新任何文本框并从下拉列表中进行选择。
一旦他完成了他的操作，数据需要通过 ajax 发送到服务器。
发送所有值是可以接受的（不仅是那些改变的值）。

需要帮助为 ajax 事务构建 JSON 字符串。
（请注意，描述列可以是字符串、文本框或下拉列表，此外下拉列表不包含相同的选项。）

我试图映射到的结构如下所示：

[
  {  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() 来从集合中删除标题。