我已经分叉了你的小提琴并创建了一个工作版本。
首先这里有一个问题,您忘记将事件侦听器添加到您将创建的第一行。
解决这个问题后,您只需将一个类添加到行总输入中,并使用调用者引用 ( $(this)
) 在侦听器上过滤到它。
因此,您需要将代码更改为:
HTML
<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>
JS
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);
更新
我建议你做的是:
- 添加一个实时事件侦听器,这样您就不需要为您创建的每一行添加事件侦听器,因为live会为您完成。[注意:live 在 1.9 版本已被弃用,或者你需要 on 方法,但它仍然有效]
- 使用更改事件而不是模糊。
- 将类添加到数量和价格字段,以便以更简单的方式过滤它们。
这将导致您的 javascript int 变成这样(您可以在此处查看小提琴):
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();
});