36 lines
1.2 KiB
Plaintext
36 lines
1.2 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Complete JavaScript Course</title>
|
|
</head>
|
|
<body>
|
|
<div id="message"></div>
|
|
<div id="output"></div>
|
|
<script>
|
|
const message = document.querySelector("#message");
|
|
const myArray = ["Laurence", "Mike", "John", "Larry", "Kim", "Joanne", "Lisa", "Janet", "Jane"];
|
|
build();
|
|
addClicks();
|
|
function build() {
|
|
let html = "<h1>My Friends Table</h1><table>";
|
|
myArray.forEach((item, index) => {
|
|
html += `<tr class="box" data-row="${index+1}" data-name="${item}"><td>${item}</td>`;
|
|
html += `<td >${index + 1}</td></tr>`;
|
|
})
|
|
html += "</table>";
|
|
document.getElementById("output").innerHTML = html;
|
|
}
|
|
function addClicks() {
|
|
const boxes = document.querySelectorAll(".box");
|
|
boxes.forEach((el) => {
|
|
el.addEventListener("click", (e) => {
|
|
let temp = el.getAttribute("data-row");
|
|
let tempName = el.getAttribute("data-name");
|
|
message.innerHTML = `${tempName } is in row #${temp}`;
|
|
})
|
|
})
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|