表中的最后一行获取删除无论按下按钮

我正在使用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

表中的最后一行获取删除无论按下按钮

回答

相关问题