Question

我有这个填充表格的代码。该表的最后一列是一个具有onclick功能的按钮。我试图传递一个变量，但我收到以下错误：

Uncaught ReferenceError: obj is not defined

我知道这个错误意味着什么，但我不知道如何修复它。

if(obj[i].book_status =="Found"){
 txt += "<tr><td>"+obj[i].Member_ID+"</td><td>"+obj[i].FirstName+"</td>" + 
          "<td>"+obj[i].LastName+"</td><td>" +obj[i].IssueDate+"</td><td>"+
          obj[i].DueDate+"</td><td><button  class='btn btn-primary' onClick='getID(obj[i].Member_ID);'>CheckIn</button></td></tr>";
 }
}

Answer 1

您正在生成一个嵌入了JavaScript的HTML字符串。执行该JavaScript时，它将处于完全不同的范围内，obj 不是定义的范围。

不要通过将HTML字符串压缩到DOM来使用DOM。使用标准DOM方法（如createElement和appendChild）。然后，您可以添加事件侦听器并保留范围。

您还可以在元素上存储相关数据，以避免创建闭包。

例如，类似于：

var row, td, item, button;

item = obj[i];

if (item.book_status == "Found") {
    row = document.createElement("tr");

    cell = document.createElement("td");
    cell.appendChild(document.createTextNode(item.Member_ID));
    row.appendChild(cell);

    cell = document.createElement("td");
    cell.appendChild(document.createTextNode(item.FirstName));
    row.appendChild(cell);

    cell = document.createElement("td");
    cell.appendChild(document.createTextNode(item.LastName));
    row.appendChild(cell);

    cell = document.createElement("td");
    cell.appendChild(document.createTextNode(item.IssueDate));
    row.appendChild(cell);

    cell = document.createElement("td");
    cell.appendChild(document.createTextNode(item.DueDate));
    row.appendChild(cell);

    cell = document.createElement("td");
    button = document.createElement("button");
    button.appendChild(document.createTextNode("CheckIn"));
    button.classList.add("btn");
    button.classList.add("btn-primary");
    button.setAttribute("data-id", item.Member_ID);
    button.addEventListener("click", getIDHandler)
    row.appendChild(cell);

    function getIDHandler(event) {
        getID(this.getAttribute("data-id"));
    }

    SOMETHING.appendChild(row);

}

Answer 2

问题是你在onclick内联处理程序中有一个字符串值，因为你必须连接它：

"</td><td><button  ... onClick='getID('"+ obj[i].Member_ID +"');'>...</td></tr>";

将parmeter传递给js功能

2 个答案: