Question

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

创建一个数组

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

Answer 1

我假设您可以依赖隐藏的输入字段，这些字段始终以四个为一组显示id[]，name[]，sales[]＆amp;每组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 = $("<tr></tr>").attr("data-id", val.id).appendTo($results);
        $("<td></td>").text(val.name).appendTo($tr);
        $("<td></td>").text(val.sales).appendTo($tr);
        $("<td></td>").text(val.price).appendTo($tr);
        $("<td></td>").text(val.price / 10).appendTo($tr);
    });
}

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

作为解释，这一行：

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

...说要使用name="id[]"获取所有输入，并将生成的jQuery对象传递给$.map() method，以便我们可以返回一个只包含id值的数组 - 您可以看到{ {1}}只是一个简单的功能。我为getVal()和其他字段做了同样的事情。

另请注意，从输入中检索时，销售和价格值是字符串，因此我使用unary plus operator将其转换为数字。

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

1 个答案: