I want to add eventlistener 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);

})
}

CodePudding user response：

You can set up the click handlers while generating the template as below. This way you don't have to query them afterwards.

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);
  });
}

CodePudding user response：

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 >
        </tbody>
    </table>