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