Сохдание таблицы из массива

Модератор: [mweb team]

Сохдание таблицы из массива

Сообщение Padonak Вс фев 19, 2023 10:33

Есть массив в котором могут быть значения:
'n' - пустые ячейки
1, 2, 3, и тд - разные отдельные блоки

Нужно создать таблицу, чтобы 'n' превратились в пустые ячейки,
а блоки 1, 1, 1 в ячейку с colspan="3", 2, 2, 2, 2, 2 в ячейку с colspan="5", и тд

Пример:
cells.jpg
cells.jpg (7.96 Кб) Просмотров: 16636


Решение 1(костыль):

Код: Выделить всё
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
   <style>
   table{
   width: 50%;
   margin: auto;
   }
   
   th, td{
   padding: 5px;
   text-align: center;
   }
   
   [colspan]{
   background-color: lightsteelblue;
   }
   </style>
  </head>
  <body>   
     <script>
   const arr = ['n', 'n', 0, 0, 0, 'n', 1, 1, 2, 2, 2, 2, 2, 'n', 'n', 3],
         table = '<table id="tt" align="center" border="1"><tbody><tr>' +
                 arr.map( x => `<th>${x}</th>`).join('') +
               '</tr><tr>' +
               arr.map( (y, i, A) => {
                 return typeof( y ) == 'string' ? '<td> </td>' : ( A[i] != A[i + 1] && A[i] != A[i - 1] ? '<td>' + y + '</td>' : '<td colspan="1">' + y + '</td>' )
               } ).join('') + '</tr></tbody></table>';
       
        document.body.insertAdjacentHTML('beforeend', table);
      
       [...document.querySelectorAll('td[colspan]')].forEach( (x, i, M) => {
       if( i < M.length - 1 ) {
       x.textContent == M[i + 1].textContent ? [  M[i + 1].colSpan += x.colSpan, x.remove()  ] : null
       }
       });
      
   </script>
  </body>
</html>


Решение 2:

Код: Выделить всё
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
   <style>
   table{
   width: 50%;
   margin: auto;
   }
   
   th, td{
   padding: 5px;
   text-align: center;
   }
   
   [colspan]{
   background-color: lightsteelblue;
   }
   </style>
  </head>
  <body>   
     <script>
   const arr = ['n', 'n', 0, 0, 0, 'n', 1, 1, 2, 2, 2, 2, 2, 'n', 'n', 3];

const { res } = arr.reduce((a, b, i, ar) => {
    if(typeof b === 'string') {
        if(a.cnt) a.res.push([a.n, a.cnt]);
        a.cnt = 0, a.n = '';
        a.res.push(['']);
    } else {
        a.n = b, a.cnt++;
        if(b !== ar[++i]) a.res.push([a.n, a.cnt]), a.cnt = 0;
    }
    return a;
}, {res: [], cnt: 0, n: ''});

const tab = (a, b) => {
    let t = `<table border="1"><tbody>`;
    t += '<tr>' + a.reduce((x, y) => x += `<th>${y}</th>`, '') + '</tr>';
    t += '<tr>' + b.reduce(
        (x, [s, n]) => x += s !== '' ? n > 1 ? `<td colspan="${n}">${s}</td>` : `<td>${s}</td>` : `<td></td>`, ''
    ) + '</tr>';
    return t += `</tbody></table>`;
};

document.body.insertAdjacentHTML('afterBegin', tab(arr, res));
   </script>
  </body>
</html>
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону

Вернуться в Javascript

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2

cron