title: Rebuild each table row as a definition list using JQuery
body: <p>I successfully converted my table to Objects using the $.map function. However, I want to convert <code>&lt;tr&gt; to &lt;dl&gt; &lt;th&gt; to &lt;dt&gt; &lt;td&gt; to &lt;dd&gt;</code>then append the result on the page &amp; finally hide the original table from view.</p>
  
  <p><strong>Note</strong>: The actual number of rows will vary on each table. I'm assuming that all tables on the site will have a <code>thead</code></p>
  
  <h2>HTML:Desired Result</h2>
  
  <pre><code>&lt;div id="item"&gt;
      &lt;dl&gt;
        &lt;dt&gt;First Name:&lt;/dt&gt;
        &lt;dd&gt;James&lt;/dd&gt;
        &lt;dt&gt;Last Name:&lt;/dt&gt;
        &lt;dd&gt;Matman&lt;/dd&gt;
        &lt;dt&gt;Job Title:&lt;/dt&gt;
        &lt;dd&gt;Chief Sandwich Eater&lt;/dd&gt;
      &lt;/dl&gt;
      &lt;dl&gt;
        &lt;dt&gt;First Name:&lt;/dt&gt;
        &lt;dd&gt;The&lt;/dd&gt;
        &lt;dt&gt;Last Name:&lt;/dt&gt;
        &lt;dd&gt;Tick&lt;/dd&gt;
        &lt;dt&gt;Job Title:&lt;/dt&gt;
        &lt;dd&gt;Crimefighter Sorta&lt;/dd&gt;
      &lt;/dl&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>HTML: Current</h2>
  
  <pre><code>&lt;div id="item"&gt;&lt;/div&gt;
  &lt;table&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;First Name&lt;/th&gt;
          &lt;th&gt;Last Name&lt;/th&gt;
          &lt;th&gt;Job Title&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;James&lt;/td&gt;
          &lt;td&gt;Matman&lt;/td&gt;
          &lt;td&gt;Chief Sandwich Eater&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;The&lt;/td&gt;
          &lt;td&gt;Tick&lt;/td&gt;
          &lt;td&gt;Crimefighter Sorta&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <h2>JQuery</h2>
  
  <pre><code>var rowCount = $("tbody &gt; tr").length;
  var items = [];
  var headers = [];
  
  $("thead th").each(function() {
       headers.push($(this).text());
  });
  
  var tbl = $('table tbody tr').map(function(r) {
   return $(this).find('td').map(function(c) {
       return {
           row:r + 1,
           col:c + 1,
           cell: $(this).text()
       }
   }).get();
  }).get();
  
  console.log(tbl);
  //$("#item").html(JSON.stringify(items));
  </code></pre>