表中的最後一行獲取刪除無論按下按鈕

我正在使用JavaScript來操縱DOM，方法是創建一個表。這個想法是，生成的表格是一個償還列表，每行旁邊有按鈕讓經理批准或拒絕報銷。下面是在HTML中生成表格的邏輯。表中的最後一行獲取刪除無論按下按鈕

var r; 
for (r in ajaxObject) { 
    document.getElementById("reTable").innerHTML += "<tr>" + 
    "<td>" + ajaxObject[r].reimbursementId + "</td>" + 
    "<td>" + ajaxObject[r].amount + "</td>" + 
    "<td>" + ajaxObject[r].statusName + "</td>" + 
    "<td>" + ajaxObject[r].description + "</td>" + 
    "<td>" + ajaxObject[r].dateSubmitted + "</td>" + 
    "<td>" + ajaxObject[r].reimbursementTypeName + "</td>" + 
    "<td><button id=\"accept" + r + "\">Accept</button></td>" + 
    "<td><button id=\"deny" + r + "\">Deny</button></td>" + 
    "</tr>"; 
} 
r = 0; 
for (r in ajaxObject) { 
    var e; 
    e = document.getElementById("accept" + r); 
    console.log(e); 
    e.onclick = function() { approveRe(ajaxObject[r].reimbursementId) }; 
    console.log(e.onclick); 
    e = document.getElementById("deny" + r); 
    console.log(e); 
    e.onclick = function() { denyRe(ajaxObject[r].reimbursementId) }; 
    console.log(e.onclick); 
}

不幸的是，我遇到了一個很奇怪的問題。無論按下哪個「批准」或「拒絕」按鈕，表格中的最後一行都會被刪除。我相信這是因爲按鈕的onclick事件附加的函數實際上並沒有評估「ajaxObject [r] .reimbursementId」，直到它們被調用，由此點「r」等於索引表中最後一行的數據。我想知道如何解決這個問題。謝謝！

來源

2017-08-04 11clock

當您定義事件處理程序修復您在封閉範圍中使用的變量值時，需要使用閉包。

所以不是：

e.onclick = function() { approveRe(ajaxObject[r].reimbursementId) };

你會做：

(function(e, id) { e.onclick = function() { approveRe(id); })(e, ajaxObject[r].reimbursementId);

或者，你可以在ID存儲在該元素，在你使用的所有情況常見的事件處理程序檢索它。你會這樣定義的元素：

<button id=\"accept" + r + "\" data-id=\"" + ajaxObject[r].reimbursementId + "\">Accept</button>

，然後檢索的功能處理程序值：

function acceptHandler(e) { 
    ... 
}

和事件處理函數分配這樣的：

e.onclick = acceptHandler;

我離開的內容事件處理程序作爲練習。這並不困難 - 從事件目標（傳遞給處理程序的事件的成員）檢索data-id屬性的值（getAttribute）並對其執行操作。

我會補充說，這在jQuery中相當簡單 - 存儲上面的id並在表上使用委託事件處理程序，按類選擇批准或拒絕按鈕。

來源

2017-08-04 03:34:40 RichGoldMD

表中的最後一行獲取刪除無論按下按鈕

回答

相關問題