Quiero agregar un detector de eventos al ícono img, cuál primero eliminar y el segundo editar. ¿Cómo puedo seleccionar img de la cadena de plantilla en este código?
function renderStudentList() { tableBody.innerHTML = ""; studentList.map((student) => { const studentRow = ` <tr> <td>${student.id}</td> <td>${student.name}</td> <td>${student.surname}</td> <td>${student.birthday}</td> <td>${student.age}</td> <td>${student.gender === "M" ? "Male" : "Female"}</td> <td> <img src="./icons/delete.svg" alt="delete"> <img src="./icons/edit.svg" alt="edit"> </td> </tr> `; tableBody.insertAdjacentHTML("beforeend", studentRow); }) }Puede configurar los controladores de clics mientras genera la plantilla. De esta manera no tienes que consultarlos después. Al igual que:
function deleteClickHandler() {} function editClickHandler() {} function renderStudentList() { tableBody.innerHTML = ""; studentList.map((student) => { const studentRow = ` <tr> <td>${student.id}</td> <td>${student.name}</td> <td>${student.surname}</td> <td>${student.birthday}</td> <td>${student.age}</td> <td>${student.gender === "M" ? "Male" : "Female"}</td> <td> <img src="./icons/delete.svg" alt="delete" onclick="deleteClickHandler()" /> <img src="./icons/edit.svg" alt="edit" onclick="editClickHandler()" /> </td> </tr> `; tableBody.insertAdjacentHTML("beforeend", studentRow); }); }Solución Javascript Vainilla
let studentList = [ { id: 1, name: 'John', surname: 'Doa', birthday: '01/01/2004', age: 18, gender: "M" }, { id: 2, name: 'Jane', surname: 'Doa', birthday: '01/01/2004', age: 18, gender: "F" }, { id: 3, name: 'John', surname: 'Doa', birthday: '01/01/2004', age: 18, gender: "M" } ] function renderStudentList() { let tableBody = document.querySelector('.table-body'); studentList.map((student) => { let trTag = document.createElement('tr'); let idTag = document.createElement('td'); let nameTag = document.createElement('td'); let surnameTag = document.createElement('td'); let birthdayTag = document.createElement('td'); let ageTag = document.createElement('td'); let genderTag = document.createElement('td'); let optionTag = document.createElement('td'); let editTag = document.createElement('img'); let delTag = document.createElement('img'); idTag.innerHTML = student.id; nameTag.innerHTML = student.name; surnameTag.innerHTML = student.surname; birthdayTag.innerHTML = student.birthday; ageTag.innerHTML = student.age; genderTag.innerHTML = student.gender === "M" ? "Male" : "Female"; editTag.src = "/edit.svg"; editTag.alt="edit"; delTag.src = "/delete.svg"; delTag.alt="delete"; editTag.addEventListener('click', () => { alert('edit'); }); delTag.addEventListener('click', () => { alert('delete'); }); optionTag.append(editTag); optionTag.append(delTag); trTag.append(idTag); trTag.append(nameTag) trTag.append(surnameTag) trTag.append(birthdayTag) trTag.append(ageTag) trTag.append(genderTag) trTag.append(optionTag) tableBody.append(trTag); }); } window.addEventListener('load', () => { renderStudentList(); }); <table> <thead> <tr> <th>id</th> <th>Name</th> <th>surname</th> <th>birthday</th> <th>Age</th> <th>gender</th> <th>Options</th> </tr> </thead> <tbody class="table-body"> </tbody> </table>