Есть массив в котором могут быть значения:
'n' - пустые ячейки
1, 2, 3, и тд - разные отдельные блоки
Нужно создать таблицу, чтобы 'n' превратились в пустые ячейки,
а блоки 1, 1, 1 в ячейку с colspan="3", 2, 2, 2, 2, 2 в ячейку с colspan="5", и тд
Пример:
- cells.jpg (7.96 Кб) Просмотров: 20356
Решение 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>
