Тут привожу код, в котором в первой строке таблицы td заменены на th, а также первая строка tr обрамлена в тег thead. Подскажите как теперь тег <thead></thead> со всем содержимым вынести за тег <tbody> ??
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$('td').each(function(){
if($(this).parent('tr').index() == 0)
{ $(this).replaceWith('<th>' +
$(this).text() + '</th>'); } });
});
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td><p><span>Name of the School</span></p></td>
<td><p><span>Location</span></p></td>
<td><p><span>Type</span></p></td>
<td><p><span>Age</span></p></td>
<td><p><span>Gender </span></p></td>
</tr>
<tr>
<td><p><span>Abacus College</span></p></td>
<td><p><span>Oxford, Oxfordshire, SE</span></p></td>
<td><p><span>Ind</span></p></td>
<td><p><span>14-23</span></p></td>
<td><p><span>Co</span></p></td>
</tr>
<tr>
<td><p><span>Abberley Hall</span></p></td>
<td><p><span>Worcester, Worcestershire, WM</span></p></td>
<td><p><span>Ind</span></p></td>
<td><p><span>2-13</span></p></td>
<td><p><span>Co</span></p></td>
</tr>
</tbody>
</table>
<script>
$('table tr:first').each(function() {
$(this).replaceWith('<thead>' + $(this).html() + '</thead>');
});
</script>
</body>
</html>