Question

我正在为我的项目开发一个测试版本，其中包含大量数据操作。我在行的末尾有两个内联按钮，一个用于编辑，一个用于提交所做的更改。

    function editRow(btn) {
    var row = btn.parentNode.parentNode;
    row.contentEditable = "true";
    row.focus();
}

function addRow(tableID, numberOfCells) {
    var tbl = document.getElementById(tableID);

    //create rows
    var newRow = tbl.insertRow(-1);

    var i;
    for (i = 0; i < numberOfCells; i++) {
        newRow.insertCell(0);
    }

    //assignbuttons
    var lastcell = newRow.cells[numberOfCells - 1];
    addEditButton(lastcell);
    addCommitButton(lastcell);
}

function addEditButton(context) {
    var button = document.createElement("input");
    button.type = "button";
    button.value = "Edit";
    button.onclick = editRow(this);
    context.appendChild(button);

}

用户将按下新的行按钮，然后会出现一个空行和两个按钮。

我收到错误：

Uncaught TypeError: Cannot read property 'parentNode' of undefined
at editRow (js.js:97)
at addEditButton (js.js:123)
at addRow (js.js:115)
at HTMLButtonElement.onclick (index.html:36)

Answer 1

我可以看到两个问题。

button.onclick = editRow(this); this会在该范围内导致undefined（严格模式）。你可以通过发送按钮元素

来解决这个问题

button.onclick = editRow(button);

更多阅读this in a function scope

此外，您不是要创建一个带有td元素的行来放置按钮。所以btn.parentNode.parentNode不是您期望的row元素

试试这个

＆＃13;

function editRow(btn) {
  var row = btn.parentNode.parentNode;
  row.contentEditable = "true";
  row.focus();
}

function addRow(tableID, numberOfCells) {
  var tbl = document.getElementById(tableID);

  //create rows
  var newRow = tbl.insertRow(-1);

  var i;
  for (i = 0; i < numberOfCells; i++) {
    newRow.insertCell(0);
  }

  //assignbuttons
  var lastcell = newRow.cells[numberOfCells - 1];
  addEditButton(lastcell);
  //addCommitButton(lastcell);
}

function addEditButton(context) {
  var row = document.createElement("row");
  var td = document.createElement("td");
  var button = document.createElement("input");
  button.type = "button";
  button.value = "Edit";
  td.appendChild(button);
  row.appendChild(td);
  context.appendChild(row);
  button.onclick = editRow(button);
}

addRow("myTable", 2)

＆＃13;

<table id="myTable">

</table>

＆＃13;

Answer 2

function addRow(tableID, numberOfCells) {
    var tbl = document.getElementById(tableID);
    var tableHTML = $("#" + tableID).html();
    if(numberOfCells === 5) {
    $("#" + tableID).html(tableHTML + "<tr id=\"bikeTableBike_new\"><td>-</td><td>-</td><td>-</td><td>-</td><td><button id=\"editBikeButton\" class=\"tableButtons\" onclick=\"editRow(this)\"><img src=\"images/edit.png\"/></button><button id=\"deleteBikeButton\" class=\"tableButtons\" onclick=\"commitRow(this)\"><img src=\"images/commit.png\"/></button></td></tr>");
    }
    if(numberOfCells === 4) {
        $("#" + tableID).html(tableHTML + "<tr id=\"bikeTableBike_new\"><td>-</td><td>-</td><td>-</td><td><button id=\"editBikeButton\" class=\"tableButtons\" onclick=\"editRow(this)\"><img src=\"images/edit.png\"/></button><button id=\"deleteBikeButton\" class=\"tableButtons\" onclick=\"commitRow(this)\"><img src=\"images/commit.png\"/></button></td></tr>");
    }
    if(numberOfCells === 3) {
        $("#" + tableID).html(tableHTML + "<tr id=\"bikeTableBike_new\"><td>-</td><td>-</td><td><button id=\"editBikeButton\" class=\"tableButtons\" onclick=\"editRow(this)\"><img src=\"images/edit.png\"/></button><button id=\"deleteBikeButton\" class=\"tableButtons\" onclick=\"commitRow(this)\"><img src=\"images/commit.png\"/></button></td></tr>");         
    }
}

在创建按钮时未定义父节点

2 个答案: