title: How to update table header using jquery
body: <p>I have a table and I am trying to create something like this on the basis of value existence in table cell.</p>
  
  <p>Result to be obtained - <a href="http://jsfiddle.net/trialcode/3Fsrv/" rel="nofollow">jsFiddle Result</a></p>
  
  <pre><code>&lt;table width="100%" border="1" cellspacing="0" cellpadding="0" class="top-table-bg" id="mytable"&gt;
                          &lt;tbody&gt;&lt;tr&gt;
                              &lt;th style="width:200px"&gt;&lt;br&gt;First Row&lt;br&gt;Second Row&lt;br&gt;Third Row&lt;br&gt;Forth Row&lt;br&gt;&lt;/th&gt;
                              &lt;th style="width:200px"&gt;&lt;p&gt;Heading1&lt;br&gt;
                              &lt;/p&gt;
                                &lt;p&gt;First Row&lt;br&gt;
                                &lt;/p&gt;&lt;/th&gt;
                              &lt;th style="width:200px"&gt;&lt;p&gt;Heading2
                                &lt;br&gt;
                            &lt;/p&gt;
                                &lt;p&gt;Second Row
                                  &lt;br&gt;
                            Forth Row&lt;br&gt;
                                &lt;/p&gt;&lt;/th&gt;
                              &lt;th style="width:200px"&gt;&lt;p&gt;Heading3
                                &lt;br&gt;
                            &lt;/p&gt;
                                &lt;p&gt;Second Row&lt;br&gt;
                            Third Row&lt;br&gt;
                            &lt;br&gt;
                                &lt;/p&gt;&lt;/th&gt;                         
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td style="width:200px;text-align:center;"&gt;First Row&lt;/td&gt;
                              &lt;td style="width:200px;text-align:center;"&gt;20&lt;/td&gt;
                              &lt;td style="width:200px;text-align:center;"&gt;&lt;/td&gt;
                              &lt;td style="width:200px;text-align:center;"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td style="width:200px;text-align:center;"&gt;Second Row&lt;/td&gt;
                              &lt;td style="width:200px;text-align:center;"&gt;&lt;/td&gt;
                              &lt;td style="width:200px;text-align:center;"&gt;20&lt;/td&gt;
                              &lt;td style="width:200px;text-align:center;"&gt;20&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr&gt;
                              &lt;td style="width:200px;text-align:center;"&gt;Third Row&lt;/td&gt;
                              &lt;td style="width:200px;text-align:center;"&gt;&lt;/td&gt;
                              &lt;td style="width:200px;text-align:center;"&gt;&lt;/td&gt;
                              &lt;td style="width:200px;text-align:center;"&gt;20&lt;/td&gt;
                          &lt;/tr&gt;   
                          &lt;tr&gt;
                              &lt;td style="width:200px;text-align:center;"&gt;Forth Row&lt;/td&gt;
                              &lt;td style="width:200px;text-align:center;"&gt;&lt;/td&gt;
                              &lt;td style="width:200px;text-align:center;"&gt;20&lt;/td&gt;
                              &lt;td style="width:200px;text-align:center;"&gt;&lt;/td&gt;
                          &lt;/tr&gt;       
                      &lt;/tbody&gt;&lt;/table&gt;
  </code></pre>
  
  <p>And this is what I tried, but it populates with all values  :(</p>
  
  <p>My try - <a href="http://jsfiddle.net/trialcode/PXJjA/2/" rel="nofollow">jsFiddle Try</a></p>
  
  <pre><code>$('#mytable&gt;tbody&gt;tr').each( function(){
     if($(this).text() != '' ) {
     $('th').append($(this).children('td').first().text() + "&lt;br&gt;");
     }
  });
  </code></pre>
  
  <p>let me know what I am doing wrong..Starter in jquery..so excuse if a basic one</p>