我在单击添加行时动态生成表行,并在单击删除行时删除生成的行。当我使用 jquery 获取 id 属性值时,仅获取第一行的值,而其他动态生成的行则未定义。
脚本:
$(document).ready(function()
{
$('#add').click(function()
{
var id=parseInt($('#main tbody tr:last').attr('id'))+1;
$('#main > tbody:last').append("<tr class=\"edit_tr\" id=\""+id+"\" ><td>"+id+"</td><td><textarea class=\"editbox\" id=\"parti_input_"+id+"\" rows=\"1\" cols=\"50\"></textarea></td><td><input type=\"text\" class=\"editbox qty\" id=\"qty_input_"+id+"\" /></td><td><input type=\"text\" class=\"editbox rs\" id=\"amountrs_input_"+id+"\" /></td><td><input type=\"text\" class=\"editbox p\" id=\"amountp_input_"+id+"\" /></td><td id=\"netamountrs_"+id+"\" ></td><td id=\"netamountp_"+id+"\"></td></tr>");
});
$('#del').click(function()
{
$('#main tbody tr:last').remove();
}
);
$('#cal').click(function()
{
var c=$('#main tbody tr').length;
var i;
for(i=0;i<c;i++)
{
var d=$('#main tbody tr').val();
document.write(d);
}
alert(c);
});
});
HTML:
<table width="800" border="1" style="border-collapse: collapse;" id="main">
<tbody><tr class="edit_tr" id="1"><td>1</td><td><textarea class="editbox part" id="parti_input_1" rows="1" cols="50"></textarea></td><td><input type="text" class="editbox qty" id="qty_input_1" /></td><td><input type="text" class="editbox rs" id="amountrs_input_1" /></td><td><input type="text" class="editbox p" id="amountp_input_1" /></td><td id="netamountrs_1"></td><td id="netamountp_1"></td></tr></tbody>
</table>
<p id="cal">calculate</p>