我的结构是这样的
Itemid
itemname
itemdescription
itemprice
itemquantity
totalamount.
在这个结构中,我有计算总数(价格*数量)的功能。我有一个添加行功能,可以添加一行和一个Grantotal函数(添加所有总计)。我需要的只是删除功能,我尝试删除很多东西但是它没有用。
这是我的代码:
$(document).ready(function () {
var counter = 2;
$("#addButton").click(function () {
if (counter > 100) {
alert("Only 100 textboxes allowed");
return false;
}
var newTextBoxDiv = $(document.createElement('tr'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<td class="first"><input placeholder="Item Code ' + counter + '" class="itmcode" type="text" name="data[' + counter + '][0]" id="itemcode' + counter + '" ></td>' + '<td><input class="itmname" placeholder="Item Name ' + counter + '" type="text" name="data[' + counter + '][1]" id="itemname' + counter + '" ></td>' + '<td><input class="itmdesc" placeholder="Item DESC' + counter + '" type="text" name="data[' + counter + '][2]" id="itemdesc' + counter + '" ></td>' + '<td><input class="itmamnt" placeholder="Item AMT' + counter + '" type="text" name="data[' + counter + '][3]" id="itemamnt' + counter + '" /></td>' + '<td><input class="itmqty" placeholder="Item QTY ' + counter + '" type="text" name="data[' + counter + '][4]" id="itemqty' + counter + '" /></td>' + '<td><input type="text" name="total' + counter + '" id="total' + counter + '" class="total" /></td><td><button class="del">Delete</button></td>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$(document).on('keyup', '.itmqty', function (ev) {
// grab ID to get row number
thisID = $(this).attr("id");
rowNum = thisID.slice(-1);
//get Amount entered
amt = $('#itemamnt' + rowNum).val();
//get QTY
qty = $('#itemqty' + rowNum).val();
$('#total' + rowNum).val(amt * qty);
currentCount = counter - 1;
var tot = 0;
$('.total').each(function () {
tot += parseFloat($(this).val());
});
$('#running_total').val(tot);
});
//$('#total').val($('#itm-qty').val() * $('#itm-amnt').val());
});
('#TextBoxesGroup').on('click','.del', function(){
if(counter==2){
alert("No More Rows to Remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
// $('#TextBoxesGroup').on('click','.del', function(){
// $(this).parents('tr:eq(0)').remove();
// });
我也试过这段代码:
$('#TextBoxesGroup').on('click','.del', function(){
$(this).parents('tr:eq(0)').remove();
});
HTML
<input type="button" id="addButton" value=" Add Row " />
<table id="TextBoxesGroup">
<tr>
<td>
<input id="itemcode1" placeholder="Item Code 1" class="itmcode" />
</td>
<td>
<input id="itemname1" placeholder="Item Name 1" />
</td>
<td>
<input id="itemdesc1" placeholder="Item Description 1" />
</td>
<td>
<input id="itemamnt1" placeholder="Item Amount 1" class="itmamnt" />
</td>
<td>
<input id="itemqty1" placeholder="Item Qty 1" class="itmqty" />
</td>
<td>
<input id="total1" placeholder="Item Total 1" class="total" />
</td>
<td><button class="del">Delete</button></td>
</tr>
</table>
<table>
<tr>
<td>Running Total</td>
<td>
<input name="running_total" id="running_total" />
</td>
</tr>
</table>
请让我知道我犯了什么错误并帮助我解决这个问题。
答案 0 :(得分:0)
小提琴链接简单。很少像错误('#TextBoxesGroup)这里没有$ symbol.And支撑不均衡。
相反,计算变量代码将过时,因此请使用$('#TextBoxesGroup tr').length
。
1)
$('#TextBoxesGroup').on('click','.del', function(){
$(this).closest("tr").remove();
});
2)Runningtotal值刷新代码段。
var tot1 = 0;
$('#TextBoxesGroup tr td input.total').each(function () {
tot1 += parseFloat($(this).val());
});
$('#running_total').val(tot1);