JavaScript 動態按鈕 OnClick 事件僅適用於最后創建的按鈕

Question

我正在使用 JavaScript 將行動態添加到表中，並且每一行都有一個刪除按鈕。

當我單擊刪除按鈕時，我想獲取包含該特定刪除按鈕的行的 ID。

行 ID 在我的代碼中正確分配，並且在我檢查 HTML 時顯示正確。

但是當我運行我的代碼時，function 僅適用於創建的最后一個按鈕，並且無論我單擊哪個按鈕，我都只會獲得表中最后一行的 ID。

因此，我的所有按鈕都調用 function 但 onClick 僅獲取包含創建的最后一個按鈕的最后一行的 ID，無論單擊哪個按鈕。

例如，如果有 5 行，即使單擊第二行中的按鈕，我將返回的 ID 也是 5。

任何幫助，將不勝感激！

這是我的代碼（我省略了其中不重要的部分）：

for (let x = 1; x < localStorage.length+1; x++) {

var row = table.insertRow(x);
     row.id = String(x);

var deleteButton = document.createElement('button');
     deleteButton.innerHTML = 'Delete';
     deleteButton.type = "button";
     deleteButton.className = "deleteButton";

     deleteButton.onclick = function() {

       var rowID = deleteButton.closest("tr")?.id;      

     }

     cell4.append(deleteButton);

     table.append(row);

}

解決方案：使我的表成為常量並將“var”s更改為“let”s

JS Function：

function viewUsers()
   {

    const table = document.getElementById("outputTable");

    for(var i = table.rows.length - 1; i > 0; i--)
    {
      table.deleteRow(i);
    }

    for (let x = 1; x < 5; x++) { 

     let row = table.insertRow(x);
     row.id = String(x);

     let cell1 = row.insertCell(0);
     let cell2 = row.insertCell(1);
     let cell3 = row.insertCell(2);
     let cell4 = row.insertCell(3);

     cell1.innerHTML = "Cell1";
     cell2.innerHTML = "Cell2";
     cell3.innerHTML = "Cell3";


     let deleteButton = document.createElement('button');
     deleteButton.innerHTML = 'Delete';
     deleteButton.type = "button";
     deleteButton.id = "deleteButton"; 
     deleteButton.className = "deleteButton";

     deleteButton.onclick = function() {

      let rowID = deleteButton.closest("tr").id;
        alert(rowID);

     }

     cell4.append(deleteButton);

     table.append(row);

   }

  }

HTML

<table id="outputTable">
    <thead>
        <tr>
            <td>Name</td>
            <td>Email</td>
            <td>Role</td>
            <td>Action</td>
        </tr>
    </thead>
</table>

<button onclick ="viewUsers()">
 Load
</button>

Answer 1

我認為問題在於var的范圍不限於 for 循環，因此當您創建 deleteButton 時， deleteButton變量僅創建一次，在循環的每次迭代中分配給該變量，並且該變量是 onclick function 使用的變量。 如果使用let ，循環的每次迭代都會有自己的deleteButton變量。

 const table = document.getElementById('table'); for (let x = 0; x < 5; x++) { let row = table.insertRow(x); row.id = String(x); let cell4 = document.createElement('td'); let deleteButton = document.createElement('button'); // Change var to let deleteButton.innerHTML = 'Delete'; deleteButton.type = "button"; deleteButton.className = "deleteButton"; deleteButton.onclick = function() { let rowID = deleteButton.closest("tr")?.id; console.log('rowID', rowID); } cell4.append(deleteButton); row.append(cell4); table.append(row); }

 <table id="table"></table>