How to update table title using jquery

Question

I have a table, and I'm trying to create something like this based on the existence of a value in a table cell.

Result - 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> 

And here is what I tried, but it fills all the values ​​:(

My try is jsFiddle Try

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

let me know what I'm doing wrong. Start in jquery..so sorry if basic

Answer 1

Try the following:

 $('#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