我有一个表，在需要时通过单击“添加项”动态添加行。当人们添加一行并在其中填写“单价”并离开输入区域时。“行总计”输入框应自动填充。我知道使用onBlur（）但由于动态行添加如何更新jquery代码每一行。
我有以下jquery代码
<script type="text/javascript">
var i=1;
function AddRow()
{
i++;
$('#myTable').append('<tr><td><input type="text" name="sno'+i+'" value="'+i+'"></td><td><input type="text" name="description'+i+'"></td><td><input type="text" id="quantity'+i+'" name="quantity'+i+'"></td><td><input type="text" id="price'+i+'" name="price'+i+'"></td><td><input type="text" name="linetotal'+i+'"></td></tr>')
$('#price'+i+'').blur(function() {
alert('Handler for .blur('+i+') called.');
});
}
</script>
示例是JSFiddle
请帮忙 提前致谢
答案 0 :(得分：3)
我已经分道扬琴并创建了一个working version。
要启动此处存在问题，您忘记将事件侦听器添加到您要创建的第一行。
解决之后，你只需要在行总输入中添加一个类，并使用调用者引用（$(this)）在侦听器上过滤进入它。
因此您需要将代码更改为：
<body>
<center>
<div class="header">
<p class="left">
VAT NO. 1234567
</p>
<p class="center">
ABC Company
<br>
<span>
Address Here
</span>
</p>
<p class="right">
TEL:123563636
<br/>
132345675643
<br/>
</p>
</div>
<br/>
<hr/>
<div class="content">
<table id="myTable">
<tr>
<td width="20px">
S.No.
</td>
<td width="400px">
Description
</td>
<td width="50px">
Quantity
</td>
<td>
Unit Price
</td>
<td>
Line Total
</td>
</tr>
<table>
<div class="button">
<input type="button" id="btnAdd" onclick="AddRow()" value="Add Item"/>
</div>
<div>
</center>
</body>
var i=0;
function AddRow()
{
i++;
$('#myTable').append('<tr><td><input type="text" name="sno'+i+'" value="'+i+'"></td><td><input type="text" name="description'+i+'"></td><td><input type="text" id="quantity'+i+'" name="quantity'+i+'"></td><td><input type="text" id="price'+i+'" name="price'+i+'"></td><td><input type="text" name="linetotal'+i+'" class="linetotal"></td></tr>')
$('#price'+i+'').blur(function() {
alert('Handler for .blur('+i+') called.');
$(this).parents("tr").find(".linetotal").val("Value Here");
});
}
$(document).ready(AddRow);
我建议你做的是：
这会导致你的javascript变成这样的东西（you can check the fiddle here）：
var i=0;
function AddRow()
{
i++;
$('#myTable').append('<tr><td><input type="text" name="sno'+i+'" value="'+i+'"></td><td><input type="text" name="description'+i+'"></td><td><input type="text" id="quantity'+i+'" name="quantity'+i+'" class="quantity"></td><td><input type="text" id="price'+i+'" name="price'+i+'" class="price"></td><td><input type="text" name="linetotal'+i+'" class="linetotal"></td></tr>');
}
$(document).ready(function(){
$(".price, .quantity").live("change", function() {
var item_quantity = parseInt($(this).parents("tr").find(".quantity").val());
var unit_price = parseInt($(this).parents("tr").find(".price").val());
var total_value = unit_price * item_quantity;
console.info(item_quantity, unit_price, total_value);
if(!isNaN(total_value))
$(this).parents("tr").find(".linetotal").val(total_value);
});
AddRow();
});
答案 1 :(得分：1)
我几乎没有更新你的代码。并使用ID属性作为'linetotal'输入而不是name。
function calculate(index)
{
//alert(index);
var price = $('#price'+index+'').val();
var qty = $('#quantity'+index+'').val();
var total = price * qty;
$('#linetotal'+index+'').val(total);
alert($('#linetotal'+index+'').val());
}
你的AddRow功能......
var i=1;
function AddRow()
{
i++;
$('#myTable').append('<tr><td><input type="text" name="sno'+i+'" value="'+i+'"></td><td><input type="text" name="description'+i+'"></td><td><input type="text" id="quantity'+i+'" name="quantity'+i+'"></td><td><input type="text" id="price'+i+'" name="price'+i+'" onblur="calculate('+i+')"></td><td><input type="text" id="linetotal'+i+'"></td></tr>')
}
答案 2 :(得分：0)
修改代码：
$(document).ready(function(){
var i = 1;
$("#btnAdd").click(function(){
i++;
$('#myTable').append('<tr><td><input type="text" name="sno'+i+'" value="'+i+'"></td><td><input type="text" name="description'+i+'"></td><td><input type="text" id="quantity'+i+'" name="quantity'+i+'"></td><td><input type="text" id="price'+i+'" name="price'+i+'" id="price'+i+'"></td><td><input type="text" id="linetotal'+i+'" name="linetotal'+i+'"></td></tr>')
$('#price'+i+'').blur(function(){
//alert($("#quantity"+i).attr('value') * $("#price"+i).attr('value'));
$("#linetotal"+i).val($("#quantity"+i).attr('value') * $("#price"+i).attr('value'));
});
});
});
将做必要的事。
$（“＃linetotal”+ i）.val（$（“＃quantity”+ i）.attr（'value'）* $（“＃price”+ i）.attr（'value' ））;
答案 3 :(得分：-2)
<div id=ots></div>
$("#ots").append(
'<div class="row main" id="maindivid'+i+'" style="border-bottom:1px solid black;">' +
'<div class="col-md-2">' +
'<div class="row">' +
'<div class="col-md-3">' +
'<span class="hide schedule" id="sheduleid' + i + '">' + k.NewOTScheduleID + '</span>' +
'<button id="btnall" name="btnall" style="background-color:red; color:yellow; font-size:10px; margin-top: 20px;">Apply</button>' +
'</div>' +
'<div class="col-md-9">' +
'<select id="tblschedule" class="backcolor" style="color:#428bca;width:146px;height:50px;border:0px; font-size:11px;border-color:black;">' +
'<option style="display:none"></option>' +
'</select>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="col-md-2" style="background-color:#fafaa0; height:52px">' +
'<div class="row" style="padding-top:5px;">' +
'<div class="table-responsive">' +
'<table class="table table-bordered Loc_table class1" style="table-layout: fixed;" id="tblnew1">' +
'<tr>' +
'<td style="text-align:center; border-color:transparent; border-bottom:1px;">1X</td>' +
'<td style="text-align:center; border-color:transparent; border-bottom:1px; border-right:1px;">1.5X</td>' +
'<td id="regular' + i + 'h1" contenteditable="true" style="background-color:white;">' + k.RegularDayH1 + '</td>' +
'<td id="regular' + i + 'h2" contenteditable="true" style="background-color:white;">' + k.RegularDayH2 + '</td>' +
'<td id="regular' + i + 'h3" contenteditable="true" style="background-color:white;">' + k.RegularDayH3 + '</td>' +
'<td id="regular' + i + 'h4" contenteditable="true" style="background-color:white;">' + k.RegularDayH4 + '</td>' +
'</tr>' +
'<tr>' +
'<td id="regular' + i + '1x" contenteditable="true" style="background-color:#eeeeee; color:blue;">' + k.RegularDay1x + '</td>' +
'<td id="regular' + i + '1.5x" contenteditable="true" style="background-color:#eeeeee; color:blue;">' + k.RegularDay1_5x + '</td>' +
'<td id="regular' + i + 'c1" contenteditable="true" style="background-color:white; color:blue;">' + k.RegularDayF1 + '</td>' +
'<td id="regular' + i + 'c2" contenteditable="true" style="background-color:white;">' + k.RegularDayF2 + '</td>' +
'<td id="regular' + i + 'c3" contenteditable="true" style="background-color:white;">' + k.RegularDayF3 + '</td>' +
'<td id="regular' + i + 'c4" contenteditable="true" style="background-color:white;">' + k.RegularDayF4 + '</td>' +
'</tr>' +
'</table>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="col-md-2" style="background-color:#ccffcc; height:52px;">' +
'<div class="table-responsive" style="padding-top:5px; margin-left: -7px; margin-right: -7px;">' +
'<table class="table table-bordered Loc_table class2" style="table-layout: fixed;" id="tblnew2">' +
'<tr>' +
'<td style="text-align:center; border-color:transparent; border-bottom:1px;">1X</td>' +
'<td style="text-align:center; border-color:transparent; border-bottom:1px;">1.5X</td>' +
'<td id="6thday' + i + 'h1" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
'<td id="6thday' + i + 'h2" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
'<td id="6thday' + i + 'h3" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
'<td id="6thday' + i + 'h4" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
'</tr>' +
'<tr>' +
'<td id="6thday' + i + '1x" contenteditable="true" style="background-color:#eeeeee; color:blue;">' + k.SixthDay1x + '</td>' +
'<td id="6thday' + i + '1.5x" contenteditable="true" style="background-color:#eeeeee; color:blue;">' + k.SixthDay1_5x + '</td>' +
'<td id="6thday' + i + 'c1" contenteditable="true" style="background-color:white;">' + k.SixthDayF1 + '</td>' +
'<td id="6thday' + i + 'c2" contenteditable="true" style="background-color:white;">' + k.SixthDayF2 + '</td>' +
'<td id="6thday' + i + 'c3" contenteditable="true" style="background-color:white; color:blue;">' + k.SixthDayF3 + '</td>' +
'<td id="6thday' + i + 'c4" contenteditable="true" style="background-color:white;">' + k.SixthDayF4 + '</td>' +
'</tr>' +
'</table>' +
'</div>' +
'</div>' +
'<div class="col-md-2" style="background-color:#ccffff; height:52px;">' +
'<div class="table-responsive" style="padding-top:5px; margin-left: -7px; margin-right: -7px;">' +
'<table class="table table-bordered Loc_table class3" style="table-layout: fixed;" id="tblnew3">' +
'<tr>' +
'<td style="text-align:center; border-color:transparent; border-bottom:1px;">1X</td>' +
'<td style="text-align:center; border-color:transparent; border-bottom:1px;">1.5X</td>' +
'<td id="7thday' + i + 'h1" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
'<td id="7thday' + i + 'h2" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
'<td id="7thday' + i + 'h3" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
'<td id="7thday' + i + 'h4" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
'</tr>' +
'<tr>' +
'<td id="7thday' + i + '1x" contenteditable="true" style="background-color:#eeeeee;">' + k.SeventhDay1x + '</td>' +
'<td id="7thday' + i + '1.5x" contenteditable="true" style="background-color:#eeeeee;">' + k.SeventhDay1_5x + '</td>' +
'<td id="7thday' + i + 'c1" contenteditable="true" style="background-color:#eeeeee; color:blue;">' + k.SeventhDayF1 + '</td>' +
'<td id="7thday' + i + 'c2" contenteditable="true" style="background-color:white;">' + k.SeventhDayF2 + '</td>' +
'<td id="7thday' + i + 'c3" contenteditable="true" style="background-color:white;">' + k.SeventhDayF3 + '</td>' +
'<td id="7thday' + i + 'c4" contenteditable="true" style="background-color:white; color:blue;">' + k.SeventhDayF4 + '</td>' +
'</tr>' +
'</table>' +
'</div>' +
'</div>' +
'<div class="col-md-3" style="background-color:#ffccff;height:52px;">' +
'<div class="row" style="padding-top:5px;">' +
'<div class="col-md-9">' +
'<div class="row">' +
'<div class="table-responsive">' +
'<table class="table table-bordered Loc_table class4" style="table-layout: fixed;" id="tblnew4">' +
'<tr>' +
'<td style="text-align:center; border-color:transparent; border-bottom:1px;">1X</td>' +
'<td style="text-align:center; border-color:transparent; border-bottom:1px;">1.5X</td>' +
'<td id="alternate' + i + 'h1" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
'<td id="alternate' + i + 'h2" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
'<td id="alternate' + i + 'h3" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
'<td id="alternate' + i + 'h4" style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
'<td style="text-align:center; border-color:transparent; border-bottom:1px;"></td>' +
'</tr>' +
'<tr>' +
'<td id="alternate' + i + '1x" contenteditable="true" style="background-color:#eeeeee; color:blue;">' + k.Alternate1x + '</td>' +
'<td id="alternate' + i + '1.5x" contenteditable="true" style="background-color:#eeeeee; color:blue;">' + k.Alternate1_5x + '</td>' +
'<td id="alternate' + i + 'c1" contenteditable="true" style="background-color:white; color:blue;">' + k.AlternateF1 + '</td>' +
'<td id="alternate' + i + 'c2" contenteditable="true" style="background-color:white;">' + k.AlternateF2 + '</td>' +
'<td id="alternate' + i + 'c3" contenteditable="true" style="background-color:white;">' + k.AlternateF3 + '</td>' +
'<td id="alternate' + i + 'c4" contenteditable="true" style="background-color:white;">' + k.AlternateF4 + '</td>' +
'<td style="border-color:transparent; border-left:1px"><input type="checkbox"></td>' +
'</tr>' +
'</table>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="col-md-3">' +
'<div class="row">' +
@*<input type="text" class="form-control tex_box" style="background-color:#eeeeee; font-size:10px; margin-top:-5px;" value="8 Distant">*@
@* <input type="text" class="form-control" style="height:30px; margin-top:2px; background-color:#eeeeee; font-size:10px;" value="L.A. Basic Crafts, IATSE, & Teamsters">*@
'<select id="restperiodone' + i + '" class="form-control tex_box" style="background-color:#eeeeee; font-size:10px; margin-top:-5px;">' +
'<option></option>' +
'</select>' +
'<select id="restperiodone' + i + '" class="form-control" style="height:30px; margin-top:2px; background-color:#eeeeee; font-size:10px;">' +
'<option></option>' +
'</select>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="col-md-1" style="background-color:#ffccff; height: 50px;">' +
'<button id="copytofavorite" style="font-size:11px; height:50px; color:yellow; background-color:#c0c0c0; margin-top:0px;">Copy To Favorite Overtime Schedules</button>' +
'</div>' +
'</div>');