javascript - 向js函数传递参数

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);

}