title: Adding rows to a table with jQuery
body: <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>