Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.01.2019, 19:39
Новичок на форуме
Отправить личное сообщение для SomebodySomeone Посмотреть профиль Найти все сообщения от SomebodySomeone
 
Регистрация: 22.06.2018
Сообщений: 6

Event Delegation
У меня есть функция которая строит таблицу.
Что мне нужно сделать, ето пронумеровать каждую TD ячейку и при клику выводить алертом етот номер.
На данный момент у меня просто рисует таблицу и при клике выводит TD.

function renderTable(columns, rows) {
    let root = document.getElementById("root");
    let table = document.createElement('TABLE');
    let tableBody = document.createElement('TBODY');

    table.appendChild(tableBody);

    for (let i = 0; i < rows; i++) {
        let tr = document.createElement('TR');
        tableBody.appendChild(tr);

        for (let j = 0; j < columns; j++) {
            let td = document.createElement('TD');
            tr.appendChild(td);
        }
    }
    root.appendChild(table);
}
renderTable(5, 5);

let element = document.getElementById("root");
element.onclick = function (event) {
    let target = event.target;
    if (target.tagName != 'TD') return;
    alert(target.nodeName);
}
Ответить с цитированием
  #2 (permalink)  
Старый 18.01.2019, 19:46
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>

<body>
	<div id="root"></div>
	<script>
		
		function renderTable(columns, rows) {
			let root = document.getElementById("root");
			let table = document.createElement("table");
			let tableBody = document.createElement("tbody");

			table.appendChild(tableBody);

			for (let i = 0; i < rows; i++) {
				let tr = document.createElement("tr");
				tableBody.appendChild(tr);

				for (let j = 0; j < columns; j++) {
					let td = document.createElement("td");
*!* 
					td.textContent = 1 + i * columns + j;
*/!* 
					tr.appendChild(td);
				}
			}
			root.appendChild(table);
		}
		renderTable(5, 5);

		let element = document.getElementById("root");
		element.onclick = function(event) {
			let target = event.target;
			if (target.tagName != "TD") return;
			alert(target.textContent);
		}

	</script>
</body>

</html>

Последний раз редактировалось Malleys, 18.01.2019 в 19:49.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как создать event, эмулирующий enter Artanis Events/DOM/Window 7 16.07.2019 07:40
Игра-квест на JS, помогите разобраться в структуре m_lulu Общие вопросы Javascript 1 29.03.2018 15:02
swfupload не грузит в опера работает хроме в чем ошибка? kolobok416 Flash 0 02.06.2014 23:01
Событие event в FireFox yambbkru Firefox/Mozilla 2 12.02.2013 17:19
event + setTimeout fsingle Events/DOM/Window 2 02.05.2012 09:07