Как обновить заголовок таблицы с помощью jquery

Question

У меня есть таблица, и я пытаюсь создать что-то вроде этого на основе существования ценности в ячейке таблицы.

Результат должен быть получен - jsFiddle Result

<table width="100%" border="1" cellspacing="0" cellpadding="0" class="top-table-bg" id="mytable"> 
         <tbody><tr> 
          <th style="width:200px"><br>First Row<br>Second Row<br>Third Row<br>Forth Row<br></th> 
          <th style="width:200px"><p>Heading1<br> 
          </p> 
           <p>First Row<br> 
           </p></th> 
          <th style="width:200px"><p>Heading2 
           <br> 
          </p> 
           <p>Second Row 
           <br> 
          Forth Row<br> 
           </p></th> 
          <th style="width:200px"><p>Heading3 
           <br> 
          </p> 
           <p>Second Row<br> 
          Third Row<br> 
          <br> 
           </p></th>       
         </tr> 
         <tr> 
          <td style="width:200px;text-align:center;">First Row</td> 
          <td style="width:200px;text-align:center;">20</td> 
          <td style="width:200px;text-align:center;"></td> 
          <td style="width:200px;text-align:center;"></td> 
         </tr> 
         <tr> 
          <td style="width:200px;text-align:center;">Second Row</td> 
          <td style="width:200px;text-align:center;"></td> 
          <td style="width:200px;text-align:center;">20</td> 
          <td style="width:200px;text-align:center;">20</td> 
         </tr> 
         <tr> 
          <td style="width:200px;text-align:center;">Third Row</td> 
          <td style="width:200px;text-align:center;"></td> 
          <td style="width:200px;text-align:center;"></td> 
          <td style="width:200px;text-align:center;">20</td> 
         </tr> 
         <tr> 
          <td style="width:200px;text-align:center;">Forth Row</td> 
          <td style="width:200px;text-align:center;"></td> 
          <td style="width:200px;text-align:center;">20</td> 
          <td style="width:200px;text-align:center;"></td> 
         </tr>  
        </tbody></table> 

И это то, что я пытался, но заселяет со всеми значениями :(

Моя попытка - jsFiddle Try

$('#mytable>tbody>tr').each(function(){ 
    if($(this).text() != '') { 
    $('th').append($(this).children('td').first().text() + "<br>"); 
    } 
}); 

дайте мне знать что я делаю неправильно .. Старт в jquery..so извините, если базовый

Answer 1

Попробуйте это:

$('#mytable>tbody>tr').each(function() { 

    var $tr = $(this); 

    $tr.children("td").not(":nth-child(1)").each(function() { 

     if ($(this).text() != '') { 
      var index = $(this).index()+1; 

      $("th") 
       .filter(":nth-child(" + index + ")") 
       .append("<br/>" + $tr.children("td:first").text()); 
     } 


    }); 

}); 

Demo