Javascript-форум - Изменить таблицу

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Изменить таблицу (https://javascript.ru/forum/jquery/56830-izmenit-tablicu.html)

Изменить таблицу

Привет. На сайте есть куча таблиц такого типа:

<table style="border-collapse: collapse; border: none; width: 487px;" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height: 1pt;">
<td >
<p><span >Name of the School</span></p>
</td>
<td >
<p><em><span >Location</span></em></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 style="height: 1pt;">
<td >
<p ><span >Abacus College</span></p>
</td>
<td >
<p><em><span >Oxford, Oxfordshire, SE</span></em></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 style="height: 1pt;">
<td >
<p ><span >Abberley Hall</span></p>
</td>
<td >
<p><em><span >&nbsp;Worcester, Worcestershire, WM</span></em></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>

Первая строка tr во всех таблицах как правило, содержат названия колонок.

Можно ли первую строку привести к такому виду?:

<thead>
  <tr>
    <th>Name of the School</th>
    <th>Location</th>
    <th>Type</th>
    <th>Age</th>
    <th>Gender</th> 
  </tr>
  </thead>

а потом чтобы начиналось тело таблицы

<tbody>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>

Понял как заменить в первой строке все td на th.

<script>
$(document).ready(function(){

$('td').each(function(){
if($(this).parent('tr').index() == 0)
{   $(this).replaceWith('<th>' +
$(this).text() + '</th>'); } });

});
</script>

А как теперь обрамить первую строку <tr></tr> в теги <thead></thead> и все это вставить перед тегом <tbody></tbody>

Тут привожу код, в котором в первой строке таблицы 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>

А по какой причине таблица не отдается сервером с уже необходимой структурой?

Не знаю, сайт был сделан не мной, я его пока обслуживаю, а на сайте куча таблиц созданных по формату, указанным мной в первом посте.

kolhoz,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
  <script>
$(function() {
    var tables = $("table");
    tables.each(function(indx, table) {
        var tr = $("tr:first", table),
            thead = $("<thead/>").append(tr);
        $("td", tr).each(function(indx, td) {
            $(td).replaceWith($("<th/>", {
                text: $(td).text()
            }))
        });
        $(table).prepend(thead)
    })
  });
  </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>

  <table style="border-collapse: collapse; border: none; width: 487px;" border="1" cellspacing="0"
  cellpadding="0">
    <tbody>
      <tr style="height: 1pt;">
        <td>
          <p><span>Name of the School</span></p>
        </td>

        <td>
          <p><em><span>Location</span></em></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 style="height: 1pt;">
        <td>
          <p><span>Abacus College</span></p>
        </td>

        <td>
          <p><em><span>Oxford, Oxfordshire, SE</span></em></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 style="height: 1pt;">
        <td>
          <p><span>Abberley Hall</span></p>
        </td>

        <td>
          <p><em><span> Worcester, Worcestershire, WM</span></em></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>
</body>
</html>

Спасибо. А можете пояснить код, какая строка что делает. Чтобы для себя я знал

kolhoz,

$(function() {
    var tables = $("table");// все таблицы
    tables.each(function(indx, table) { //цикл по таблицам
        var tr = $("tr:first", table), //нашли первую строку в таблице
            thead = $("<thead/>").append(tr); //создали элемент thead перенесли в него первую строку
        $("td", tr).each(function(indx, td) {//нашли все ячейки в первой строке
            $(td).replaceWith($("<th/>", { // заменили  в цикле на th
                text: $(td).text() // + текст самой ячейки (если нужны теги span, p  то заменить на  html : $(td).html() )
            }))
        });
        $(table).prepend(thead)  //thead вставить в начало таблицы
    })//обрабатываем  следущую таблицу
  });

Цитата:

Сообщение от kolhoz

Не знаю, сайт был сделан не мной, я его пока обслуживаю, а на сайте куча таблиц созданных по формату,

И что проблематично найти место, где либо описывается их шаблон, либо вывод их и внести изменения? Это какой-то абсурд отдавать клиенту html-код, который он еще должен приводить к нужному виду.