我想将重复的 .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>
如果需要更改我的代码,请告诉我。我只想组合相同的商品代码,如果点击则只添加他们的数量。
答案 0 :(得分:0)
快速工作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");
}
}