如果输入字段的值相同，则求和它们的值

Question

我被困在用于在 javascript/jquery 中完成此任务的逻辑上，如果有人有任何想法，我可以使用一些帮助。

我有一张表格，显示发票上产品的每件商品成本。

目标是按类别查找所有产品（目前是 shirtcountrow 和 hoodiecountrow，但以后会有更多）并将具有相同值的产品组合起来。

当前表格如下所示：

<table id="productmathtable">
<tr>    
<td>Shirt</td>       
<td><input class="shirtcountrow" type="text" value="4" style="width:60px"> x <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>      
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="100" style="width:60px"></td>
</tr>
<tr>         
<td>Shirt</td>       
<td><input class="shirtcountrow" type="text" value="2" style="width:60px"> x <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>       
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="50" style="width:60px"></td>       
</tr>
<tr>         
<td>Shirt</td>       
<td><input class="shirtcountrow" type="text" value="2" style="width:60px"> x     <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>      
 <td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="50" style="width:60px"></td>     
 </tr><tr>       
<td>Hoodie</td>     
 <td><input class="hoodiecountrow" type="text" value="4" style="width:60px"> x <input class="productpricerow" type="text" value="35" style="width:60px"> = </td>         
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="140" style="width:60px"></td>      
</tr>
<tr>         
 <td>Hoodie</td>        
 <td><input class="hoodiecountrow" type="text" value="4" style="width:60px"> x <input class="productpricerow" type="text" value="35" style="width:60px"> = </td>         
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="140" style="width:60px"></td></tr>     
</table>

我希望它在执行 jquery/javascript 函数后看起来像这样：

<table id="productmathtable">
<tr>    
<td>Shirt</td>       
<td><input class="shirtcountrow" type="text" value="8" style="width:60px"> x <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>      
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="200" style="width:60px"></td>
</tr> 
<td>Hoodie</td>     
 <td><input class="hoodiecountrow" type="text" value="8" style="width:60px"> x <input class="productpricerow" type="text" value="35" style="width:60px"> = </td>         
<td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="280" style="width:60px"></td>      
</tr>   
</table>

我很确定我需要更改我的 html，以便更容易识别我想要更改的每个部分，但我不确定如何

Answer 1

授予您的 html 未优化，但与其重新考虑所有这些，这里有一种方法可以将它们汇总起来，然后用汇总总数重写表格。我所做的一件事是在数量字段的类中 - 我将它们标准化为都有“数量”类。

let uniques = []
$('#productmathtable tr').each(function() {
  // do we have this one yet?
  let thisname = $(this).find('td').eq(0).text().trim()
  let exists = uniques.findIndex(u => u.name.toLowerCase() === thisname.toLowerCase())
  let q = +$(this).find('.quantity').val();
  let p = +$(this).find('.productpricerow').val();
  if (exists > -1) {
    uniques[exists].quantity += q;
  } else {
    uniques.push({
      name: thisname,
      quantity: q,
      price: p
    });
  }
  $(this).remove();
})

uniques.forEach(o => {
  let row = `<tr>
    <td>${o.name}</td>
    <td><input class="quantity" type="text" value="${o.quantity}" style="width:60px"> x <input class="productpricerow" type="text" value="${o.price}" style="width:60px"> = </td>
    <td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="${o.quantity * o.price}" style="width:60px"></td>
  </tr>`;
  $('#productmathtable').append(row)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="productmathtable">
  <tr>
    <td>Shirt</td>
    <td><input class="quantity" type="text" value="4" style="width:60px"> x <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>
    <td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="100" style="width:60px"></td>
  </tr>
  <tr>
    <td>Shirt</td>
    <td><input class="quantity" type="text" value="2" style="width:60px"> x <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>
    <td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="50" style="width:60px"></td>
  </tr>
  <tr>
    <td>Shirt</td>
    <td><input class="quantity" type="text" value="2" style="width:60px"> x <input class="productpricerow" type="text" value="25" style="width:60px"> = </td>
    <td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="50" style="width:60px"></td>
  </tr>
  <tr>
    <td>Hoodie</td>
    <td><input class="quantity" type="text" value="4" style="width:60px"> x <input class="productpricerow" type="text" value="35" style="width:60px"> = </td>
    <td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="140" style="width:60px"></td>
  </tr>
  <tr>
    <td>Hoodie</td>
    <td><input class="quantity" type="text" value="4" style="width:60px"> x <input class="productpricerow" type="text" value="35" style="width:60px"> = </td>
    <td class="tabletotalrow"><input class="productotalrow totalrow" type="text" value="140" style="width:60px"></td>
  </tr>
</table>

Answer 2

为了更具体地重新提出问题......您似乎是在说，对于某些类名列表中的每个类名，您想要进行以下转换：

在#productmathtable 中查找包含具有给定类名的输入的所有tr；将第一个此类输入的“值”属性设置为匹配的“类名”输入的“值”属性的总和；同样对 producttotalrows 的“值”属性求和；然后删除其他匹配的 tr。

当然，如果可能的话，在创建 dom 之前对原始数据进行这种操作会更容易。但是像下面的（未经测试的）代码应该可以解决问题......

// Get an array of all the tr's.
var trlist = $("#productmathtable > tr").toArray();

// Apply tranformation function for each classname.
["shirtcountrow", "hoodiecountrow"].forEach(
    function(cname) {
        var ctotal = 0;
        var ptotal = 0;
        var combined = null;

        // Use Array.filter to get the set of matching tr's for this classname.
        var subset = trlist.filter(function (tr) {
            return ($("input."+cname, tr).length > 0);
        });

        // Walk through this list, updating the dom as you go.
        subset.forEach(function (tr) {
            // Update cached values.
            ctotal += parseInt($("input."+cname, tr).attr("value"));
            ptotal += parseInt($("input.producttotalrows", tr).attr("value"));

            if (combined === null) {
                // First item: just keep it, as-is.
                combined = tr;
            } else {
                // Subsequent items...
                // Update values in dom.
                $("input."+cname, combined).attr("value", ctotal);
                $("input.producttotalrows", combined).attr("value", ptotal);

                // Remove now-extraneous tr from dom.
                $(tr).remove();
            }
        });
    }
);