title: Replace only top-level parent table elements with divs, not child tables
body: <p>I am looking to replace a table and it's rows and cells with divs, but the script I have found replaces every child table and their descendents with divs too, which I do not want.  Child tables should remain tables.</p>
  
  <p>How do I just target the top-level parent table and not any of the children tables?</p>
  
  <pre><code>    $('table.calendar-header').each(function (){
          $(this).replaceWith( $(this).html()
              .replace(/&lt;tbody/gi, "&lt;div class='table'")
              .replace(/&lt;tr/gi, "&lt;div class='tr'")
              .replace(/&lt;\/tr&gt;/gi, "&lt;/div&gt;")
              .replace(/&lt;td/gi, "&lt;div class='td")
              .replace(/&lt;\/td&gt;/gi, "&lt;/div&gt;")
              .replace(/&lt;\/tbody/gi, "&lt;\/div")
          );
      });
  </code></pre>
  
  <p>I've tried inserting :first-child and .first() into the script in various places to no avail. </p>
  
  <p>Here's what the HTML looks like before script runs [note that I left out content from child tables in this code snippet].  You can see that there are tables within the parent table. I want those to remain as is, not be replaced.</p>
  
  <pre><code>&lt;table class="calendar-header" cellspacing="0" cellpadding="6" border="0" style=""&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td valign="top"&gt;
                  &lt;table class="calendar" cellspacing="0" cellpadding="2"&gt;&lt;/table&gt;
              &lt;/td&gt;
              &lt;td align="center"&gt;
                  &lt;div class="eventNav"&gt;&lt;/div&gt;
              &lt;/td&gt;
              &lt;td valign="top" align="right"&gt;
                  &lt;table class="calendar" cellspacing="0" cellpadding="2"&gt;&lt;/table&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>