jQuery 合并 appendTo 行（如果存在）

Question

我想将重复的 .appendTo 项与唯一代码组合起来

我不想拥有两个项目，而是想组合并添加它们的数量，

如果我要添加相同的项目，它们的数量只会增加而不是添加新行。

Javascript

function AddOrder(item) {       
    // order list
    var rows = "";
    var code = document.getElementsByName("code")[item].value;
    var name = document.getElementsByName("name")[item].value;
    var cost = document.getElementsByName("cost")[item].value;
    var qty = document.getElementsByName("qty")[item].value;
    var actn = "";

    rows += 
        "<tr>"+
            "<td class='item_code'>"+code+"</td>"+
            "<td>"+name+"</td>"+
            "<td class='item_qty'>"+qty +"</td>"+ 
            "<td class='item_cost'>"+cost+".00</td>"+ 
            "<td>"+'<button class="btn btn-danger remove-button">x</button>'+actn+"</td>"+
        "</tr>";
    $(rows).appendTo("#order_table tbody");
}

HTML 我在 tbody

处附加项目

<form>
    <input hidden=true name="code" type="text" value="FJVCHPM" >
    <input hidden=true name="name" type="text" value="java chip m">
    <input hidden=true name="qty" type="text" value="1">
    <input hidden=true name="cost" type="text" value="90">
    <button id="0" type="button" class="btn btn-default" onclick="AddOrder(this.id)">1</button>
</form>

<form>
    <input hidden=true name="code" type="text" value="FCHCHPM" >
    <input hidden=true name="name" type="text" value="chocolate chip m">
    <input hidden=true name="qty" type="text" value="1">
    <input hidden=true name="cost" type="text" value="90">
    <button id="1" type="button" class="btn btn-default" onclick="AddOrder(this.id)">2</button>
</form>

<form>
    <input hidden=true name="code" type="text" value="FMCHAM" >
    <input hidden=true name="name" type="text" value="mocha m">
    <input hidden=true name="qty" type="text" value="1">
    <input hidden=true name="cost" type="text" value="85">
    <button id="2" type="button" class="btn btn-default" onclick="AddOrder(this.id)">3</button>
</form>

<form>
    <input hidden=true name="code" type="text" value="FCACM" >
    <input hidden=true name="name" type="text" value="oreo m">
    <input hidden=true name="qty" type="text" value="1">
    <input hidden=true name="cost" type="text" value="90">
    <button id="3" type="button" class="btn btn-default" onclick="AddOrder(this.id)">4</button>
</form>


<table id="order_table">
  <thead>
    <tr>
      <th>code</th>
      <th>name</th>
      <th>qty</th>
      <th>cost</th>
      <th>act</th>
    </tr>
  </thead>
  <tbody></tbody>
  <thead>
    <tr>
      <th>--</th>
      <th>--</th>
      <th id="total_qty">0</th>
      <th id="total_cost">0</th>
      <th>--</th>
    </tr>
  </thead>
</table>    

如果需要更改我的代码，请告诉我。我只想组合相同的商品代码并在点击时仅添加它们的数量。

Answer 1

快速工作fiddle

代码几乎是自我解释的，您只需尝试查找带有代码的行是否存在。如果是，则获取所需的值（如成本和数量）并添加新值。如果不存在具有此类代码的行，则追加新行。

function AddOrder(item) {       
    var rows = "";
    var code = $(item).find('[name="code"]').val();
    var name = $(item).find('[name="name"]').val();
    var cost = $(item).find('[name="cost"]').val();
    var qty = $(item).find('[name="qty"]').val();
    var actn = "";

    var existingEl = $('#order_table .item_code');

    var tr = null;
    for(var i = 0; i < existingEl.length; i++){
    if(existingEl.eq(i).text() === code)
        tr = existingEl.eq(i).parent();
    }

    if(tr != null){
        tr.find('.item_qty').text(parseInt(tr.find('.item_qty').text()) + parseInt(qty))
    } else {
    rows += 
        "<tr>"+
            "<td class='item_code'>"+code+"</td>"+
            "<td>"+name+"</td>"+
            "<td class='item_qty'>"+qty +"</td>"+ 
            "<td class='item_cost'>"+cost+".00</td>"+ 
            "<td>"+'<button class="btn btn-danger remove-button">x</button>'+actn+"</td>"+
        "</tr>";
    $(rows).appendTo("#order_table tbody");
    } 
}