使用JS创建表,其中包含来自API的行数据。每一行的最后一个单元格都有一个按钮,当单击该按钮时,应该会显示一个带有结果的弹出窗口。
newCell = newRow.insertCell();
var button_results = document.createElement("button");
button_results.innerText = 'view results';
button_results.value=jobs_data[i]["Results"];
button_results.addEventListener("click", function(){
display_popup_in_results(button_results);
}, false);
newCell.appendChild(button_results);
上面的部分创建单元格。
function display_popup_in_results(button_results){
document.getElementById("popup_content").innerHTML=button_results.value;
const modal = document.querySelector('.modal-wrapper');
modal.style.display = 'block';
var close_btn = document.querySelector('.modal-close');
close_btn.addEventListener('click',hide_popup_in_results);
}
上面是JS函数。但是,无论您单击哪一行,它始终显示最后一行的值。
产生的td是laso不正确的,并且不包括onclick。
<td><button value="1">view results</button></td>
1条答案
按热度按时间ht4b089n1#
问题是,当事件侦听器被触发时,循环已经完成执行,并且
button_results
变量引用了最后创建的按钮。你可以使用
IIFE
来解决这个问题。Demo: