Dynamic Row add & remove to table with jquery
<p>i was searching google for dynamically row add &amp; remove. i got a code but i think it will solve my purpose.</p>

<h2>code i got</h2>

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

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

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

<p>suppose i have table with 5 rows and when user click on the image which is on 2nd rows then i want to add a row dynamically just after 2nd row but before 3rd row. so new row will become 3rd row and when user click again on the image then the new row added will be removed.</p>

<p>from the above code will not solve my purpose. so how to achieve it by jquery. thanks</p>

<p>i found trick to fulfill my objective.</p>

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

            });


            $(".myimg").click(function () {
                $(this).closest('tr').next().remove();
                return false;
            });
        });
</code></pre>
