title: how to add caption and span to table
body: <p>Here is existing HTML , yes the developer used nested tables and i cant change the existing HTML , but i need to replace the table class , then add a caption and span to the main table only.</p>
  
  <pre><code>&lt;table class="two_column_layout" align="center"&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td class="two_column_layout" valign="top"&gt;
              &lt;table class="report" align="center" cellspacing="1"&gt;&lt;/table&gt;
          &lt;/td&gt;
          &lt;td class="two_column_layout" valign="top"&gt;
              &lt;table class="report" align="center" cellspacing="1"&gt;&lt;/table&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="two_column_layout" valign="top"&gt;
              &lt;table class="report" align="center" cellspacing="1"&gt;&lt;/table&gt;
          &lt;/td&gt;
          &lt;td class="two_column_layout" valign="top"&gt;
              &lt;table class="report" align="center" cellspacing="1"&gt;&lt;/table&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>I need the new html to look like this</p>
  
  <pre><code>&lt;table class="report" align="center"&gt;
  &lt;caption&gt;
      &lt;span&gt;
          Weekly Results
      &lt;/span&gt;
  &lt;/caption&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td class="two_column_layout" valign="top"&gt;
              &lt;table class="report" align="center" cellspacing="1"&gt;&lt;/table&gt;
          &lt;/td&gt;
          &lt;td class="two_column_layout" valign="top"&gt;
              &lt;table class="report" align="center" cellspacing="1"&gt;&lt;/table&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="two_column_layout" valign="top"&gt;
              &lt;table class="report" align="center" cellspacing="1"&gt;&lt;/table&gt;
          &lt;/td&gt;
          &lt;td class="two_column_layout" valign="top"&gt;
              &lt;table class="report" align="center" cellspacing="1"&gt;&lt;/table&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>So i already changed the table class from "two_column_layout" to "report" by adding this </p>
  
  <pre><code>$('#body_options_22 table').removeClass('two_column_layout').addClass('report');
  </code></pre>
  
  <p>but i don't know how to add the caption and span just for the first table.report </p>
  
  <pre><code>&lt;caption&gt;
      &lt;span&gt;
          Weekly Results
      &lt;/span&gt;
  &lt;/caption&gt;
  </code></pre>