БЛОГ НА HUSL


Выгрузка из БД в таблицу с объединением ячеек

Автор вопроса: Анатолий

Нашел здесь функцию объединяющую ячейки таблицы с одинаковыми значениями. Переделал таблицу под свои значений. Конечно скрипт надо помещать после таблицы, чтобы она сначала загрузилась.

function myFunction() {
  const previousRow = {};
  const colsChanged = {};
  let dark = false;
  
  Array.from(document.querySelectorAll('tbody tr')).forEach((tr, rowIdx) => {
    Array.from(tr.children).forEach((td, colIdx) => {
      if (rowIdx > 0 && previousRow[colIdx].text === td.innerText) {
        previousRow[colIdx].elem.setAttribute('rowspan', ++previousRow[colIdx].span);
        colsChanged[colIdx] = false;
        td.remove();
      } else {
        previousRow[colIdx] = { span: 1, text: td.innerText, elem: td, dark };
        colsChanged[colIdx] = true;
      }
    });
    const rowChanged = Object.values(colsChanged).every(Boolean);
    dark = rowChanged && rowIdx > 0 ? !dark : dark;
    if (dark) {
      tr.classList.add('dark');
    }
  });
}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

th {
  background: #a9a9a9;
}

td,
th {
  border: 1px solid black;
  text-align: center;
  padding: 8px;
  font-family: monospace;
  font-size: 17px;
}

.dark {
  background-color: #dddddd;
}
</style>
<body onload="myFunction()">
  <table>
    <thead>
      <tr>
        <th>Первое поколение</th>
        <th>Второе поколение</th>
        <th>Третье поколение</th>
        <th>Четвертое поколение</th>
        <th>Пятое поколение</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Прадед<br> <img src="https://cstor.nn2.ru/users/users/foto/235861-2010-11-15-Montgomery.png" height="100" width="100"></td>
        <td>Дед <br> <img src="https://catherineasquithgallery.com/uploads/posts/2021-02/1614519577_40-p-personazhi-na-belom-fone-50.jpg" height="100" width="100"> <br> <a href="page/new.html">Ссылка</a>
        <br> Бабушка <br> <img src="https://www.pngplay.com/wp-content/uploads/14/Marge-Simpson-Transparent-File.png" height="100" width="100">
        </td>
        <td>Отец <br> <img src="https://e7.pngegg.com/pngimages/880/394/png-clipart-homer-simpson-marge-simpson-the-simpsons-season-2-the-simpsons-movie-miscellaneous-hand.png" height="100" width="100">
        </td>
        <td>Я <br> <img src="https://slovnet.ru/wp-content/uploads/2019/01/3-63-768x816.jpg" height="100" width="100">
        <br>Жена <br> <img src="http://1.bp.blogspot.com/_vj2e1m7Hlgw/TI6UlwGZZbI/AAAAAAAArBo/GX7tDkIUn3Y/s1600/simp2.jpg" height="100" width="100">    
        </td>
        <td>Сын</td>
      </tr>
      <tr>
        <td>Прадед<br> <img src="https://cstor.nn2.ru/users/users/foto/235861-2010-11-15-Montgomery.png" height="100" width="100"></td>
        <td>Дед <br> <img src="https://catherineasquithgallery.com/uploads/posts/2021-02/1614519577_40-p-personazhi-na-belom-fone-50.jpg" height="100" width="100"> <br> <a href="page/new.html">Ссылка</a>
        <br> Бабушка <br> <img src="https://www.pngplay.com/wp-content/uploads/14/Marge-Simpson-Transparent-File.png" height="100" width="100"> 
        </td>
        <td>Отец <br> <img src="https://e7.pngegg.com/pngimages/880/394/png-clipart-homer-simpson-marge-simpson-the-simpsons-season-2-the-simpsons-movie-miscellaneous-hand.png" height="100" width="100"></td>
        <td>Я <br> <img src="https://slovnet.ru/wp-content/uploads/2019/01/3-63-768x816.jpg" height="100" width="100">
        <br>Жена <br> <img src="http://1.bp.blogspot.com/_vj2e1m7Hlgw/TI6UlwGZZbI/AAAAAAAArBo/GX7tDkIUn3Y/s1600/simp2.jpg" height="100" width="100">    
        </td>
        <td>Дочь</td>
      </tr>
      <tr>
        <td>Прадед<br> <img src="https://cstor.nn2.ru/users/users/foto/235861-2010-11-15-Montgomery.png" height="100" width="100"></td>
        <td>Дед <br> <img src="https://catherineasquithgallery.com/uploads/posts/2021-02/1614519577_40-p-personazhi-na-belom-fone-50.jpg" height="100" width="100"> <br> <a href="page/new.html">Ссылка</a>
        <br> Бабушка <br> <img src="https://www.pngplay.com/wp-content/uploads/14/Marge-Simpson-Transparent-File.png" height="100" width="100"> 
        </td>
        <td>Отец <br> <img src="https://e7.pngegg.com/pngimages/880/394/png-clipart-homer-simpson-marge-simpson-the-simpsons-season-2-the-simpsons-movie-miscellaneous-hand.png" height="100" width="100"></td>
        <td>Брат <br> <img src="https://cdn1.ozone.ru/s3/multimedia-c/6452682120.jpg" height="100" width="100"></td>
        <td>Племянница</td>
      </tr>
      <tr>
        <td>Прадед<br> <img src="https://cstor.nn2.ru/users/users/foto/235861-2010-11-15-Montgomery.png" height="100" width="100"></td>
        <td>Дед <br> <img src="https://catherineasquithgallery.com/uploads/posts/2021-02/1614519577_40-p-personazhi-na-belom-fone-50.jpg" height="100" width="100"> <br> <a href="page/new.html">Ссылка</a>
        <br> Бабушка <br> <img src="https://www.pngplay.com/wp-content/uploads/14/Marge-Simpson-Transparent-File.png" height="100" width="100"> 
        </td>
        <td>Отец <br> <img src="https://e7.pngegg.com/pngimages/880/394/png-clipart-homer-simpson-marge-simpson-the-simpsons-season-2-the-simpsons-movie-miscellaneous-hand.png" height="100" width="100"></td>
        <td>Брат <br> <img src="https://cdn1.ozone.ru/s3/multimedia-c/6452682120.jpg" height="100" width="100"></td>
        <td>Племянник</td>
      </tr>
      <tr>
        <td>Прадед<br> <img src="https://cstor.nn2.ru/users/users/foto/235861-2010-11-15-Montgomery.png" height="100" width="100"></td>
        <td>Дед <br> <img src="https://catherineasquithgallery.com/uploads/posts/2021-02/1614519577_40-p-personazhi-na-belom-fone-50.jpg" height="100" width="100"> <br> <a href="page/new.html">Ссылка</a>
        <br> Бабушка <br> <img src="https://www.pngplay.com/wp-content/uploads/14/Marge-Simpson-Transparent-File.png" height="100" width="100"> 
        </td>
        <td>Отец <br> <img src="https://e7.pngegg.com/pngimages/880/394/png-clipart-homer-simpson-marge-simpson-the-simpsons-season-2-the-simpsons-movie-miscellaneous-hand.png" height="100" width="100"></td>
        <td>Сестра <br> <img src="https://w7.pngwing.com/pngs/557/199/png-transparent-the-simpsons-girl-character-illustration-maggie-simpson-bart-simpson-lisa-simpson-marge-simpson-homer-simpson-simpsons-heroes-cartoon-area.png" height="100" width="100"></td>
        <td>Племянник1</td>
      </tr>
      <tr>
        <td>Прадед<br> <img src="https://cstor.nn2.ru/users/users/foto/235861-2010-11-15-Montgomery.png" height="100" width="100"></td>
        <td>Дед <br> <img src="https://catherineasquithgallery.com/uploads/posts/2021-02/1614519577_40-p-personazhi-na-belom-fone-50.jpg" height="100" width="100"> <br> <a href="page/new.html">Ссылка</a>
        <br> Бабушка <br> <img src="https://www.pngplay.com/wp-content/uploads/14/Marge-Simpson-Transparent-File.png" height="100" width="100"> 
        </td>
        <td>Отец <br> <img src="https://e7.pngegg.com/pngimages/880/394/png-clipart-homer-simpson-marge-simpson-the-simpsons-season-2-the-simpsons-movie-miscellaneous-hand.png" height="100" width="100"></td>
        <td>Сестра <br> <img src="https://gas-kvas.com/grafic/uploads/posts/2023-09/1695920609_gas-kvas-com-p-kartinki-simpsoni-31.png" height="100" width="100"></td>
        <td>Племянник2</td>
      </tr>
      <tr>
        <td>Прадед<br> <img src="https://cstor.nn2.ru/users/users/foto/235861-2010-11-15-Montgomery.png" height="100" width="100"></td>
        <td>Дед <br> <img src="https://catherineasquithgallery.com/uploads/posts/2021-02/1614519577_40-p-personazhi-na-belom-fone-50.jpg" height="100" width="100"> <br> <a href="page/new.html">Ссылка</a>
        <br> Бабушка <br> <img src="https://www.pngplay.com/wp-content/uploads/14/Marge-Simpson-Transparent-File.png" height="100" width="100"> 
        </td>
        <td>Дядя <br> <img src="https://i.pinimg.com/originals/d1/fd/d8/d1fdd86d6f9aff3e2f32b8f90d1837da.jpg" height="100" width="100"></td>
        <td>Сестра1 <br><img src="https://gas-kvas.com/grafic/uploads/posts/2023-09/1695920609_gas-kvas-com-p-kartinki-simpsoni-31.png" height="100" width="100"></td>
        <td>Племянник</td>
      </tr>
      <tr>
        <td>Прадед<br> <img src="https://cstor.nn2.ru/users/users/foto/235861-2010-11-15-Montgomery.png" height="100" width="100"></td>
        <td>Дед <br> <img src="https://catherineasquithgallery.com/uploads/posts/2021-02/1614519577_40-p-personazhi-na-belom-fone-50.jpg" height="100" width="100"> <br> <a href="page/new.html">Ссылка</a>
        <br> Бабушка <br> <img src="https://www.pngplay.com/wp-content/uploads/14/Marge-Simpson-Transparent-File.png" height="100" width="100"> 
        </td>
        <td>Дядя <br> <img src="https://i.pinimg.com/originals/d1/fd/d8/d1fdd86d6f9aff3e2f32b8f90d1837da.jpg" height="100" width="100"></td>
        <td>Брат<br> <img src="https://e7.pngegg.com/pngimages/94/162/png-clipart-the-simpsons-character-illustration-ralph-wiggum-chief-wiggum-lisa-simpson-marge-simpson-bart-simpson-the-simpsons-springfield-fictional-character.png" height="100" width="100"></td>
        <td>Племянник1</td>
      </tr>
      <tr>
        <td>Прадед<br> <img src="https://cstor.nn2.ru/users/users/foto/235861-2010-11-15-Montgomery.png" height="100" width="100"></td>
        <td>Брат деда <br> <img src="https://pngimg.com/uploads/simpsons/simpsons_PNG41.png" height="100" width="100"></td>
        <td>Сын брата деда</td>
        <td>Внук брата деда<br> <img src="https://cstor.nn2.ru/users/users/foto/235861-2010-11-15-Montgomery.png" height="100" width="100"></td>
        <td></td>
      </tr>
      <tr>
        <td>Прадед<br> <img src="https://cstor.nn2.ru/users/users/foto/235861-2010-11-15-Montgomery.png" height="100" width="100"></td>
        <td>Сестра деда</td>
        <td>Дочь сестры деда</td>
        <td>Внучка сестры деда</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</body>

Выгружаю из БД в массив, из массива формирую таблицу.

var contacts = <?php echo ($arr_f)?>;

var tbody = document.querySelector('tbody');

for (var i = 0; i < contacts.length; i++) {
  var tr = document.createElement('tr');
  tr.innerHTML =
    '<td>' + contacts[i].first + '</td>' +
    '<td>' + contacts[i].second + '</td>' +
    '<td>' + contacts[i].third + '</td>' +
    '<td>' + contacts[i].fourth + '</td>' +
    '<td>' + contacts[i].fifth + '</td>' +
    '<td>' + contacts[i].sixth + '</td>';
  tbody.appendChild(tr);
}
table {
  border-collapse: collapse;
  width: 100%;
}

tr {
  border: 1px solid #dfdfdf;
}

th,
td {
  padding: 30px 100px;
  border: 1px solid #000000;
}
<?php
$arr_f = array();
array_push($arr_f,"{first: '",$familia_x." ".$imya_x." ".$otchestvo_x.' '.$date_birth_x.':'.$date_death_x."',second:'',third:'',fourth:'',fifth:'',sixth:''},");
array_push($arr_f,"{first: '",$familia_x." ".$imya_x." ".$otchestvo_x.' '.$date_birth_x.':'.$date_death_x."',second:'",$familia_i." ".$imya_i." ".$otchestvo_i.' '.$date_birth_i.':'.$date_death_i."',third:'',fourth:'',fifth:'',sixth:''},");
array_push($arr_f,"{first: '",$familia_x." ".$imya_x." ".$otchestvo_x.' '.$date_birth_x.':'.$date_death_x."',second:'",$familia_i." ".$imya_i." ".$otchestvo_i.' '.$date_birth_i.':'.$date_death_i."',third:'",$familia_t." ".$imya_t." ".$otchestvo_t.' '.$date_birth_t.':'.$date_death_t."',fourth:'',fifth:'',sixth:''},");
?>

  <body onload="myFunction()">

    <div id="tree">
      <?php
$arr_f = array_diff($arr_f, array(''));
array_unshift($arr_f, "[");
array_push($arr_f, "]");
$arr_f = implode($arr_f);

?>
        <table class="table">
          <thead>
            <tr>
              <th scope="col">Первое поколение</th>
              <th scope="col">Второе поколение</th>
              <th scope="col">Третье поколение</th>
              <th scope="col">Четвертое поколение</th>
              <th scope="col">Пятое поколение</th>
              <th scope="col">Шестое поколение</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
    </div>
  </body>
Только есть проблема: первый скрипт объединяет пустые ячейки. Как можно это исправить? И как-то не правильно формируется таблица вторым скриптом.


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.