使用表单数据创建数组，对表格数据进行分组和排序

我有一些输入字段比我想要的数组，所以我可以在我的页面上的表中查看它们。 我已经能够使用.serializeArray（）创建一个数组

在这个小提琴我已经能够输出我的数组但是我希望数据显示在我在硬件底部硬编码的表中，它将Tom和Jerry的所有实例分组为每个id一行。 确定该ID等的所有销售价值。我想按总销售价格列对其进行排序。 我知道服务器端技术，但在这种情况下，我正在寻找一个jquery解决方案。 实现这一目标的最佳方法是什么？

Answer 1

我假设您可以依赖隐藏的输入字段，这些字段总是以四个一组的forms出现，每个组都有一个id[] ， name[] ， sales[]和price[] ，否则（显然）你无法分辨哪些字段有关系。 因此，不是使用.serializeArray() ，它返回包含所有值的单个数组，而是将id放在它们自己的数组中，将它们放在自己的数组中，依此类推。 也许是这样的：

 function showValues() { function getVal(el, i) { return el.value; } var ids = $.map($('input[name="id[]"]'), getVal), names = $.map($('input[name="name[]"]'), getVal), sales = $.map($('input[name="sales[]"]'), getVal), prices = $.map($('input[name="price[]"]'), getVal), data = {}, i, $results = $("#results"); for (i = 0; i < ids.length; i++) { if (!data[ids[i]]) { // if current id is new add a record for it: data[ids[i]] = { "id":ids[i],"name":names[i],"sales":+sales[i],"price":+prices[i] }; } else { // otherwise add to existing record's totals data[ids[i]].sales += +sales[i]; data[ids[i]].price += +prices[i]; } } // data object now contains the details for each salesman, // so turn it into an array to allow sorting: data = $.map(data, function(val, key) { return val; }); data.sort(function(a,b) { return a.price - b.price; }); // now output table - assume there's already a table element with headings $.each(data, function(i, val) { var $tr = $("").attr("data-id", val.id).appendTo($results); $("").text(val.name).appendTo($tr); $("").text(val.sales).appendTo($tr); $("").text(val.price).appendTo($tr); $("").text(val.price / 10).appendTo($tr); }); } 

工作演示： http ： //jsfiddle.net/nnnnnn/VNSam/5/

作为解释，这一行：

 ids = $.map($('input[name="id[]"]'), getVal) 

…说要获取name="id[]"所有输入，并将生成的jQuery对象传递给$.map()方法，以便我们可以返回一个只包含id值的数组 – 你可以看到getVal()只是一个简单的函数。 我为name[]和其他字段做同样的事情。

另请注意，从输入中检索时，销售和价格值是字符串，因此我使用一元加运算符将它们转换为数字。