Dynamic Row add＆amp;用jquery删除到表

Question

我正在谷歌搜索动态行添加＆amp;去掉。我有一个代码，但我认为这将解决我的目的。

我得到的代码

<table id="Table1">
    <tr>
        <td>
            <img src='expand.gif' id="imgExpandCollapse" alt="ABC" style="cursor:pointer" />
        </td>
        <td>
            Name : Keith
        </td>
        <td>
            Desig : Manager
        </td>
    </tr>
</table>

$(document).ready(function() {
        var b = true;
        $('#imgExpandCollapse').click(function() {

            if (b) {
                this.src = "collapse.png";
                b = false;
                $('#Table1').append('<tr><td>&nbsp;</td><td>Name : Abc</td><td>Desig : XYZ</td></tr>');
            }
            else {
                this.src = "expand.gif";
                b = true;
                $('#Table1 tr:last-child').remove();
            }
        });
    });

假设我有5行的表，当用户点击第2行的图像时，我想在第2行之后但在第3行之前动态添加一行。所以新行将成为第3行，当用户再次点击图像时，添加的新行将被删除。

从上面的代码

将无法解决我的目的。那么如何通过jquery实现它。感谢

我找到了实现目标的技巧。

            $(document).ready(function () {
            $("table#Table1 tr").click(function () {
                var $tr = $(this).closest('tr');
                var myRow = ($tr.index() + (++counter));
                //alert("Row " + myRow);
                $(this).after("<tr onclick='javascript:AddRow();'><td>" + myRow + ")&nbsp;</td><td><img src='Images/closelabel.png' id='imgExpandCollapse' alt='ABC' style='cursor:pointer'/></td><td>Name : New one</td><td>Desig : CEO</td></tr>");

            });


            $(".myimg").click(function () {
                $(this).closest('tr').next().remove();
                return false;
            });
        });

Answer 1

我认为如果你改变了

$('#Table1').append...

到

$(this).parent().parent().append...

并更改

$('#Table1 tr:last-child').remove();

到

$(this).parent().parent().next().remove();

它应该有用。我没有测试它，因为我刚刚完成午休时间，但我会检查我什么时候可以看看它是否确实如此：）