title: Apply same style to outer tag using jquery
body: <p>I have table with me as:</p>
  
  <pre><code>&lt;table&gt; 
     &lt;tbody&gt;
       &lt;tr&gt;
           &lt;td&gt;
                &lt;span style="background-color:red;color:white"&gt;One&lt;/span&gt;
           &lt;/td&gt;
           &lt;td&gt;
                &lt;span style="background-color:green;font-size:10px"&gt;One&lt;/span&gt;             
           &lt;/td&gt;
           &lt;td&gt;
                &lt;span style="background-color:blue"&gt;One&lt;/span&gt;             
           &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I want to apply the same style present in <code>&lt;span&gt;</code> to the outer <code>&lt;td&gt;</code>.
  I am new to jquery. How can I achieve this using jquery?<br>
  So that the final table will became:</p>
  
  <pre><code>&lt;td style="background-color:red;color:white"&gt;
        &lt;span style="background-color:red;color:white"&gt;One&lt;/span&gt;
  &lt;/td&gt;
  &lt;td style="background-color:green;font-size:10px"&gt;
         &lt;span style="background-color:green;font-size:10px"&gt;One&lt;/span&gt;             
  &lt;/td&gt;
  </code></pre>