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);
}
|
<!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>
|
| Часовой пояс GMT +3, время: 10:36. |