Rebuild each table row as a definition list using JQuery
<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>
