Функцию бы покороче - JavaScript, Ajax - Страница 2

Падонак · 15.02.2023, 19:12

Parallelogram, вот два варианта решения вашей задачи. Первый выглядит понятнее, но является конкретным костылём, а второй - покруче, но более мутный на первый взгляд:

Код:

<!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>

Код:

<!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>

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
написать функцию, определяющую пол продавца. Используя функцию, вывести продавцов - мужчин	Nuc	SQL, базы данных	12	12.03.2018 10:12
В функцию с переменным числом параметроы передать указатели на функцию	Вероника99	Помощь студентам	3	05.10.2016 15:44
Написать функцию «Факториал» и программу, использующую эту функцию для вывода таблицы факториалов.	Rufer	Помощь студентам	1	20.06.2016 12:53
[Язык LISP] Используя функцию DEFUN, определить функцию	DemonXZ	Помощь студентам	0	09.06.2013 18:10
Описать функцию нахождения расстояния между 2-мя точками на плоскости, заданными своими координатами, и функцию ....	zzz6	Помощь студентам	2	06.07.2011 08:24