我总结文本框有问题，但只有按下添加更多按钮才会出现文本框。所以我将它与点击功能混合使用，结果是和函数只能将第一个文本框相加。
这是我的javascript：
var i = $('table tr').length;
var count = $('table tr').length;
var row = i;
var a = 0;
for (a = 0; a <= i; a++) {
$(".addmore_" + a).on('click', function (a) {
return function() {
var box = $("#box_"+ a);
box.val( Number(box.val())+1 );
var data = "<td><input class='form-control sedang' type='text' id='packinglist_" + a + "' name='packinglist"+ a +"[]'/></td>";
$("#keatas_" + a).append(data);
$("#packinglist_"+ a).each(function() {
$(this).keyup(function(){
calculateSum();
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$("#packinglist_"+ a).each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#netto_"+ a).val(sum.toFixed(2));
};
}
}(a));
}
这里我的html与php混合：
for($i=1;$i<=$_POST['jumlahdata'];$i++)
{
$nomor = $a[0];
$iden = $nomor + $i;
echo" <tr>
<td><span id='snum'>$i.</span></td>
<input class='form-control' type='hidden' id='hiddenlot_$i' name='hiddenlot[]' />
<input class='form-control' type='hidden' id='hiddencustomer_$i' name='hiddencustomer[]' />
<input class='form-control' type='hidden' id='hiddenprice_$i' name='hiddenprice[]' />
<td><input class='form-control' type='text' id='jenisbenang_$i' name='jenisbenang[]' readonly/></td>
<td><input class='form-control' type='text' id='warna_$i' name='warna[]' readonly/></td>
<td><input class='form-control' type='text' id='lot_$i' name='lot[]' required/></td>
<td><input class='form-control sedang' type='text' id='netto_$i' name='netto[]' required/> </td>
<td><input class='form-control pendek' type='text' id='box_$i' name='box[]' /> </td>
<td><input class='form-control pendek' type='text' id='cones_$i' name='cones[]'/> </td>
<td><input class='form-control' type='text' id='keterangan_$i' name='keterangan[]'/>
<input class='form-control' type='hidden' id='keterangan_$i' name='identitas[]' value='$iden'/>
</td>
</tr>
<tr>
<td><a><span class='glyphicon glyphicon-plus addmore_$i' id='$i'></span></a><br>
<a><span class='glyphicon glyphicon-minus delete_$i'></a> </td>
<td colspan='10'>
<table id='keatas_$i' class='keatas'>
<tr>
</tr>
</table>
</tr>
</td>";
}
任何回复都将不胜感激，谢谢
答案 0 :(得分：1)
请不要在循环中定义click事件和函数，尝试使用全局类，这样就不需要使用循环了，请查看我的建议。
注意：您应该使用$('body').on('keyup','.packinglist', function(){，因为$('.packinglist').keyup( function(){无法处理脚本添加的新DOM。
希望这有帮助。
$('body').on('click', ".add-btn", function () {
var parent_tr= $(this).closest('tr');
var index= parent_tr.data('index');
var box = parent_tr.find('input[name="box[]"]');
box.val( Number(box.val())+1 );
var data = "<td><input class='packinglist form-control sedang' type='text' id='packinglist_" + index + "' name='packinglist"+ index +"[]'/></td>";
$("#keatas_" + index).append(data);
});
$('body').on('keyup','.packinglist', function(){
console.log($(this).val());
var parent_tr = $(this).closest('tr');
var sum = 0;
parent_tr.find('.packinglist').each(function() {
if(!isNaN($(this).val()) && $(this).val().length!=0) {
sum += parseFloat($(this).val());
}
});
parent_tr.prev('tr').find('input[name="netto[]"]').val(sum.toFixed(2));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input class='form-control sedang' type='text' id='netto_1' name='netto[]' placeholder="netto" required/> </td>
<tr data-index='1'>
<td><a><input type='button' value='addmore' class='add-btn glyphicon glyphicon-plus addmore_1'><br> </td>
<td colspan='10'>
<table id='keatas_1' class='keatas'>
<tr>
</tr>
</table>
</td>
</tr>
<tr>
<td><input class='form-control sedang' type='text' id='netto_2' name='netto[]' placeholder="netto" required/> </td>
<tr data-index='2'>
<td><a><input type='button' value='addmore' class='add-btn glyphicon glyphicon-plus addmore_2'><br> </td>
<td colspan='10'>
<table id='keatas_2' class='keatas'>
<tr>
</tr>
</table>
</td>
</tr>
</table>
答案 1 :(得分：1)
问题是在点击回调中应用keyup事件监听器。对于＆＃34; .addMore _＆＃34; + a元素的每次点击，您将附加<td>，其中包含id＆＃34; packinglist _＆＃34; + a在第^行中。之后，您将在该元素上附加keyup侦听器。你正在选择id，它只返回第一个匹配而不是全部。所以它唯一的附加侦听器在id的那一行中的第一个<td>。代码中给出了更正。
或者，您可以使用类来完成此操作。但是你需要小心不要多次将事件附加到元素上。这会导致意外行为，有时会导致浏览器崩溃。
在calculateSum函数中，您也通过id访问元素，它只返回一个元素。这应该通过为每行的输入框提供唯一的类来修复。
var i = $('table tr').length;
var count = $('table tr').length;
var row = i;
var a = 0;
for (a = 0; a <= i; a++) {
$(".addmore_" + a).on('click',function () {
return function() {
var box = $("#box_"+ a);
box.val( Number(box.val())+1 );
var rowIdentifier="packinglist_" + a;
var data = $("<td><input class='form-control sedang "+rowIdentifier +"' type='text' id='packinglist_" + a + "' name='packinglist"+ a +"[]'/></td>");
$("#keatas_" + a).append(data);
data.find('input').on('keyup',function(){
calculateSum();
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".packinglist_"+ a).each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#netto_"+ a).val(sum.toFixed(2));
};
}
}(a));
}
如果这有帮助，请告诉我。尝试简化html结构。很难理解。
答案 2 :(得分：0)
删除keyup事件绑定输出侧循环
$("#packinglist_"+ a).each(function() {
$(this).keyup(function(){
calculateSum();
});
});
添加课程.packageList并将keyup与课程绑定。
$("tr").on("keyup", ".packageList", function(evt) {
calculateSum();
});