Jquery 获取父级名称不起作用

Question

我有以下示例: http://jsfiddle.net/Jm7Kp/

这里的想法是动态创建表，表内的按钮仅在该表中创建行。

<div id="divPrincipal">
</div>
<button id="btnAdd">Add</button>

<script>
    var objDivPrincipal = $("#divPrincipal");
    var tbl;
    $("#btnAdd").click(function () {
        createTable();
    });

    function createTable() {
        tbl = $("<table border=1><thead><tr><td>FName</td><td>LName</td></tr></thead><tbody></tbody><tfoot><tr><td><button class='btnAddRow'>AddRow</button></td><td></td></tr></tfoot></table></br>");
        objDivPrincipal.append(tbl);
        tbl.find(".btnAddRow").click(function () {
            $(this).parent().parent().parent().after("<tr><td>John</td><td>Snow</td></tr>");
        });
    }
</script>

我不喜欢使用parent().parent().parent()...我尝试使用parent('tbody')和closest('tbody')但它不起作用。即使是parent('table').find('tbody')也不起作用。

谢谢。

Answer 1

用途:

$(this).closest('table').append("<tr><td>John</td><td>Snow</td></tr>");

<强> jsFiddle example