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"); 
    } 
}