javascript - 来自 HTML 表的 JSON 数组中的 Group BY

Question

我有这个表，并尝试循环遍历 tr 并获取包含如下数据的 ID:

 var array = [];
    var res = $(".seq").map(function () {
        
        return {
            Id: $('.Id', this).val(),
            DR: $('.DR', this).val(),
            CR: $('.CR', this).val()
        };
    }).get();

    var json = JSON.stringify(res, null, 3);
    alert(json);

<table>
  <tr class="seq">
    <td>
      <select class="Id">
        <option value="1" selected="selected">row 1</option>
        <option value="2">row 2</option>
        <option value="3">row 3</option>
        <option value="4">row 4</option>
</select>
    </td>
     <td> 
       <input class="DR" value="10" type="text">
     </td>
    <td> 
       <input class="CR" value="10" type="text">
     </td>
  </tr>
  <tr class="seq">
    <td>
      <select class="Id">
        <option value="1" selected="selected">row 1</option>
        <option value="2">row 2</option>
        <option value="3">row 3</option>
        <option value="4">row 4</option>
</select>
    </td>
     <td> 
       <input class="DR" value="30" type="text">
     </td>
    <td> 
       <input class="CR" value="5" type="text">
     </td>
  </tr>
</table>

结果是这样的:

[
   {
      "Id": "1",
      "DR": "10",
      "CR": "10"
   },
   {
      "Id": "1",
      "DR": "30",
      "CR": "5"
   }
]

问题是如果数组中存在，我如何按 ID 进行分组，如果存在，我想将值添加到 CR 和 DR...，如下所示:

  [
   {
      "Id": "1",
      "DR": "40",
      "CR": "15"
   }
]

Answer 1

您可以过滤具有相同值的 select 元素，然后迭代文本输入。以下代码片段应该适用于许多行。

var array = [],
    ids = [],
    $select = $(".Id");

var res = $(".seq").map(function () {
    var id = $('.Id', this).val();

    if ($.inArray(id, ids) > -1) return;

    ids.push(id);
    var $m = $select.filter(function () {
        return this.value === id;
    });

    var DR = 0, CR = 0;

    $m.closest('td').siblings().find('.DR, .CR').each(function () {
        if ($(this).hasClass('DR')) DR += +this.value;
        else CR += +this.value;
    });

    return {
        Id: id,
        DR: DR,
        CR: CR
    };
}).get();

http://jsfiddle.net/syo26tcs/