Jquery Append .header к THEAD тр е

Question

В настоящее время существует tr.header тд, но мне нужно, чтобы быть в пустом THEAD тр-й

$("#new table tr.Header td").each(function(){ 
    $(this).appendTo("thead tr th"); 
}); 

Это работает на самом деле, но проблема у меня есть, что несколько таблиц существуют в DOM. Мне не нужен каждый заголовок во всех заголовках. Мне просто нужно, чтобы tr.header каждой таблицы добавлялся к thead tr th. Заголовок 1 будет добавлен в таблицу 1 thead ... и так далее.

Как я могу это достичь?

Текущий результат:

<table> 
<thead> 
<tr> 
    <th>Header 1 Header 2 Header 3 Header 4</th> 
</tr> 
</thead> 
<tbody><tr><td> 
    Row 1 
    </td></tr> 
<tr><td> 
    Row 2 
    </td></tr> 
<tr><td> 
    Row 3 
    </td></tr> 
</tbody> 
</table> 

<table> 
<thead> 
<tr> 
    <th>Header 1 Header 2 Header 3 Header 4</th> 
</tr> 
</thead> 
<tbody><tr><td> 
    Row 1 
    </td></tr> 
<tr><td> 
    Row 2 
    </td></tr> 
<tr><td> 
    Row 3 
    </td></tr> 
</tbody> 
</table> 

<table> 
<thead> 
<tr> 
    <th>Header 1 Header 2 Header 3 Header 4</th> 
</tr> 
</thead> 
<tbody><tr><td> 
    Row 1 
    </td></tr> 
<tr><td> 
    Row 2 
    </td></tr> 
<tr><td> 
    Row 3 
    </td></tr> 
</tbody> 
</table> 

<table> 
<thead> 
<tr> 
    <th>Header 1 Header 2 Header 3 Header 4</th> 
</tr> 
</thead> 
<tbody><tr><td> 
    Row 1 
    </td></tr> 
<tr><td> 
    Row 2 
    </td></tr> 
<tr><td> 
    Row 3 
    </td></tr> 
</tbody> 
</table> 

Без какого-либо JQuery таблицы все выглядит следующим образом:

<table> 
<thead> 
<tr> 
    <th></th> 
</tr> 
</thead> 
<tbody><tr class="Header"><td> 
    Header 1 
    </td></tr> 
    <tr><td> 
    Row 1 
    </td></tr> 
<tr><td> 
    Row 2 
    </td></tr> 
<tr><td> 
    Row 3 
    </td></tr> 
</tbody> 
</table> 

Answer 1

Я должен сказать, что это один из самых необычных вещей, которые люди зададут здесь, но здесь вы идете:

$("table tr.Header td").each(function(){ 
    $(this).appendTo($(this).closest('table').find('thead tr th')); 
});