Javascript 如何使用jquery更新表头

我有一个表，我试图在表单元格中存在值的基础上创建类似的东西

须取得的结果—

第一行
第二行
第三行
第四行

标题1


第一行


标题2



第二排


第四排


头3



第二排

第三排




第一排
20
第二排
20
20
第三排
20
第四排
20

这就是我尝试过的，但是它填充了所有的值：(

我的尝试-

$（'#mytable>tbody>tr'）。每个（函数（）{
如果（$（this）.text（）！=“”）{
$（'th'）.append（$（this.children（'td'）.first（）.text（）+“
”）；
}
});

让我知道我做错了什么..jquery中的初学者..所以如果是基本的，请原谅

$（'#mytable>tbody>tr'）。每个（函数（）{
var$tr=$（本）；
$tr.children（“td”）。不是（“：n个children（1）”）。每个（函数（）{
如果（$（this）.text（）！=“”）{
var index=$（this.index（）+1；
$（“th”）
.filter（“：n个子项（“+索引+”）
.append（“
”+$tr.children（“td:first”）.text（））；
}
});
})

#mytable th{
宽度：200px；
}
#mytable td{
文本对齐：居中；
宽度：200px；
}

标题1
标题2
头3
第一排
20
第二排
20
20
第三排
20
第四排
20

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

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