Question

我有以下HTML /脚本代码

<script type="text/javascript">
    $(function(){
        $(".AddItem").click(function(){
            $(this).parents('table tr:last').after('<tr><td>&nbsp;</td><td><input type="text" name="item[]" value=""></td></tr>');
            return false;
        });
    });
</script>
<table>
    <tr>
        <td valign="top">Items&nbsp;<a href="#" class="AddItem"><img src="images/16/button-add.png"  title="Add more Items"></a></td>
        <td><input type="text" name="item[]"  ></td>
    </tr>
    <tr>
        <td>Count: </td>
        <td>10</td>
    </tr>
</table>

这将在行下方添加一行添加按钮。我需要在页脚行（Count）上方的表格底部添加一行。我应该使用什么选择器？

请注意this question不符合我的要求，它会选择最后一行。

Answer 1

尝试.prev()

Fiddle Demo

$(this).closest('table').find('tr:last').prev().after('<tr><td>&nbsp;</td><td><input type="text" name="item[]" value=""></td></tr>');

Answer 2

USe .before()

 $(this).parents('table tr:last').before('<tr><td>&nbsp;</td><td><input type="text" name="item[]" value=""></td></tr>');

修改

$(this).parents('table').find("tr:last").before('<tr><td> </td><td><input type="text" name="item[]" value=""></td></tr>');

Answer 3

$(function(){
        $(".AddItem").click(function(e){
            $("tr:last", $(this).parents('table')).before('<tr><td>&nbsp;</td><td><input type="text" name="item[]" value="+"/></td></tr>');
            return false;
        });
    });

你也可以试试这个

在最后一行之前向表中添加一行

3 个答案: