jquery 创建表格的问题

Question

[code="script"]
$(document).ready( function() {
$("#btnAddRow").click(addRow);
});
function addRow() {
var tdSize = $("#mytable thead td").size();
var trSize = $("#mytable tbody tr").size();
var tr = $("

");
tr.attr("title","双击改变文本");
tr.hover( function() {
$(this).css("background", "gray");
}, function() {
$(this).css("background", "#fff");
});
for ( var i = 0; i < tdSize; i++) {
var td = $("");
var text=trSize + "" + (i + 1);
td.text(text);
//问题在这里
td.dblclick(function(){
var input="";
td.html(input);
});

        tr.append(td);
    }
    $("#mytable tbody").append(tr);
}

[/code]
[code="html"]

id="mytable">

        </tbody>
    </TABLE>

[/code]

在js中我給每个td都赋了双击事件，为什么点击后会出现在最后一个td上了？

标题1

标题2

标题3

标题4

Answer 1

[code="javascript"]
$(document).ready( function() {
$("#btnAddRow").click(addRow);
$("#btnRemoveRow").click(removeRow);
});
function addRow() {
var tdSize = $("#mytable thead td").size();
var trSize = $("#mytable tbody tr").size();
var tr = $("

");
tr.attr("title","双击改变文本");
tr.hover( function() {
$(this).css("background", "gray");
}, function() {
$(this).css("background", "#fff");
});
for ( var i = 0; i < tdSize; i++) {
var td = $("");
td.text(trSize + "" + (i + 1));
td.dblclick(function(){
var input=$("");
input.val($(this).text());
input.blur(function(){
$(this).parent().text($(this).val());
});
$(this).text("");
$(this).append(input);
});
tr.append(td);
}
$("#mytable tbody").append(tr);
}
function removeRow(){
var trSize=$("#mytable tbody tr").size();
if(trSize<=0){
return;
}
var tr = $("#mytable tbody tr:last");
tr.remove();
}
[/code]