title: Get data-field of above td cell
body: <p>I have a button that adds a row to a table. The table is editable on click (similar to one found here: <a href="http://www.9lessons.info/2011/03/live-table-edit-with-jquery-and-ajax.html" rel="nofollow">http://www.9lessons.info/2011/03/live-table-edit-with-jquery-and-ajax.html</a>)
  However, I get my table data from a database. Each <code>&lt;td&gt;</code> has a <code>data-field</code> attribute that cooresponds with the <code>&lt;td&gt;'s</code> field name in the database. Now, in order for the added table row to be editable like the other rows, I need to mark the <code>&lt;td&gt;'s</code> <code>data-field</code> with the <code>data-field</code> from the cell directly above it. I have tried a few different methods but keep coming up short. Here is my add row script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          /*
          Add a new table row to the bottom of the table
      */
  
      $(document).ready(function()
      {
          $(".add").click(function()
          {
              $("#table").each(function()
              {
                  var $table = $(this);
                  var id=$('#table tr:last').attr('id');
                  var $tr = $("#table").children('tr');
                  var $th = $(this).closest('table').find('th').eq($(this).index());
                  // Number of td's in the last table row
                  var n = $('tr:last td', this).length;
                  var tds = '&lt;tr class="edit_tr" id="' + id++ + '"&gt;';
  
                  for(var i = 0; i &lt; n; i++)
                  {
                      tds += '&lt;td class="edit_td"&gt;&lt;input type="text" class="editbox" id="' +
                      id + '" data-field="' + $th + '"/&gt;&amp;nbsp;&lt;/td&gt;';
                      console.log($th);
                  }
                  tds += '&lt;/tr&gt;';
                  //console.log(tds);
                  if($('tbody', this).length &gt; 0)
                  {
                      $('tbody', this).append(tds);
                  }else {
                      $(this).append(tds);
                  }
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Now, notice <code>var $th = $(this).closest('table').find('th').eq($(this).index());</code>. That is the closest I have gotten. However, I do not want to access by <code>th</code>. I want to access by data-field. Any ideas?</p>