Форум

SomebodySomeone · #1 (**permalink**) 18.01.2019, 19:39

У меня есть функция которая строит таблицу.
Что мне нужно сделать, ето пронумеровать каждую 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);
}

Malleys · #2 (**permalink**) 18.01.2019, 19:46

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

Форум

Справочник

Discord чат

Курсы javascript