I want to add an event listener to icon img which first one to delete and second for edit. How can I select img from template string in this code?
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);
})
}
You can set up the click handlers while generating the template. This way you don't have to query them afterwards. Like so:
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);
});
}
Vanilla Javascript Solution
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>