Select 並將事件偵聽器添加到模板文字字符串中的元素

Question

我想向圖標 img 添加一個事件偵聽器，第一個要刪除，第二個要編輯。 如何在此代碼中從模板字符串中獲取 select img？

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

})
}

Answer 1

您可以在生成模板時設置點擊處理程序。 這樣您就不必事后查詢它們。 像這樣：

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

Answer 2

香草 Javascript 解決方案

 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>