Adding rows to a table with jQuery
<p>I am trying to develop a plugin for jQuery. This is my first plugin, and I am stuck in the initial phase. </p>

<p>I need to do following things: I need to find the "add row" link from the table and bind to the click event. When the link is clicked, it should add a new row by cloning the existing template row. Initially the template row is hidden.</p>

<p>Following is the HTML.</p>

<pre><code>&lt;table id='grid1'&gt;
    &lt;tr&gt;
        &lt;td&gt;&lt;a href='#' id='add_row'&gt;Add New Row&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;
            &lt;table id='data_table'&gt;
                &lt;tr&gt;&lt;th&gt;Col1&lt;/th&gt;&lt;th&gt;Col2&lt;/th&gt;&lt;th&gt;Col3&lt;/th&gt;&lt;/tr&gt;
                &lt;tr&gt;&lt;td&gt;Data1&lt;/td&gt;&lt;td&gt;Data2&lt;/td&gt;&lt;td&gt;Col3&lt;/td&gt;&lt;/tr&gt;
                &lt;tr id='template_row'&gt;
                   &lt;td&gt;&lt;input type='text' /&gt;&lt;/td&gt;
                   &lt;td&gt;&lt;input type='text' /&gt;&lt;/td&gt;
                   &lt;td&gt;&lt;input type='text' /&gt;&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/table&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>And my jQuery so far:</p>

<pre><code>(function($) {
  $.extend($.fn, {
    editableGrid: function() {
      function addRow() {
        //code to clone here but i need the instance of main table here ie grid1
      }
      this.find('#add_row').bind("click",addRow);
    }
  });   
})(jQuery);
</code></pre>
