Форум

imhateb · #1 (**permalink**) 28.11.2018, 22:05

Здравствуйте.

Помогите пожалуйста. Есть необходимость разместить на странице таблицу 1200х1200 ячеек. Естественно для её создания я использую скрипт. Вот он:

$(document).ready(function() {
    for(var r = 0; r < 1201; r++){		
      $('table#coords').append('<tr>');			
      for(var d = 0; d < 1200; d++){$('table#coords tr:nth-child('+r+')').append('<td></td>');}			
      $('table#coords').append('</tr>');	
    }
 })

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

Вопрос такой, может я прошу слишком многого? И браузеры просто не в силах справиться с такой задачей? Хотя вроде ж в 21м веке живём.

Или может я что-то не правильно делаю? Если у вас есть решение, буду очень признателен за помощь.

P.S. Браузеры пробовал разные (все популярные) - результат один и тот же (т.е. никакой).

j0hnik · #2 (**permalink**) 28.11.2018, 23:28

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		td{
			border: 1px solid red;
			width: 2px;
			height: 2px;
		}
	</style>
</head>
<body>
	<script>

	var table = document.createElement('table');
	str='';
	for(var i = 0; i<1200; i++) str+='<tr>'+('<td>'.repeat(1200));
	table.innerHTML = str;
	document.body.append(table);

	</script>
</body>
</html>

хром секунд 8-9 ff за 3 сек грузит, памяти метров 800 съедает

рони · #3 (**permalink**) 28.11.2018, 23:28

imhateb,
у таких таблиц обычно отображают видимую часть,и попробуйте сначала создать, а потом выводить (append текст таблицы только 1 раз).
и 5 строка не нужна!

imhateb · #4 (**permalink**) 29.11.2018, 00:02

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

imhateb,
у таких таблиц обычно отображают видимую часть,и попробуйте сначала создать, а потом выводить (append текст таблицы только 1 раз).
и 5 строка не нужна!

Простите, Рони, а можно поподробнее?

И по поводу отображения видимой части - всё усложняется тем, что таблица эта должна быть повёрнута на 45 градусов как на рисунке. И я вообще теряюсь как это реализовать.

Помимо прочего я хотел бы чтобы при наведении/клике можно было выводить координаты соответствующей ячейки. Стало быть для этого в код создания таблицы надо добавить момент с вставкой этих координат в ячейки... Но код предложенный профессором J0hnik мне не совсем понятен, и боюсь, я не смогу его допилить самостоятельно.((((

рони · #5 (**permalink**) 29.11.2018, 00:30

imhateb,
слайдер 9 кадров, три на три, вы видите только центральный, идём влево, справа удаляем три блока, слева рисуем три блока, вот и весь алгоритм.

imhateb · #6 (**permalink**) 29.11.2018, 00:38

Рони, я обещаю, что я попытаюсь в этом разобраться. Всё-таки азарт присутствует. Я уже сутки не спал и не ел. Хочется победить эту задачу и со спокойной совестью идти отдыхать. Так что я буду дальше ковыряться.

Но блин, если я всё-таки не смогу, могу ли я рассчитывать на то, что Вы поможете? Вы уже не раз меня выручали

Форум

Справочник

Discord чат

Курсы javascript