HTML onclick 事件不适用于在单元格中创建按钮的内部 HTML 语法

Question

我有这段代码，它应该在 table 单元格中插入一个按钮。该按钮有动作，所以我添加 onclick。但是，onclick='function_name' 的语法是单引号。我使用单引号 with/without 反斜杠，但没有解决我遇到的错误。我得到 editRow is not defined 并且按下按钮没有效果。我还发现 HTML 将我在单元格文本中输入的单引号解释为双引号。我不知道问题的根源是什么。

var info = [{
  "firstName": "aaa",
  "lastName": "A"
}, {
  "firstName": "bbb",
  "lastName": "B"
}, {
  "firstName": "ccc",
  "lastName": "C"
}];
function display(info) {
var table=document.getElementById("table");
var Length=info.length;

for(var i=0; i<info.length; i++)
{
    var row = table.insertRow(i+1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
                            
    cell1.innerHTML = info.[i].firstName;
    cell2.innerHTML = info.[i].lastName;
    
    var editButtonHTML = "<input type=button value=Edit class=edit id=edit-button"+(i+1)+" onclick=\'editRow("+(i+1)+")\'>";
    
    cell3.innerHTML=editButtonHTML;
}//end for  

function editRow()
{
    console.log("inside editRow "+(i+1));
}

//console.log(table.innerHTML);
}//end display

@Rohit Kumar 提供的解决方案在运行 Firefox 浏览器中的代码有效。但是当运行它在插件扩展中使用 jpm 时，它给出：

ReferenceError: editRow is not defined

此外，当我在 table 中打印 HTML 代码时，我看到双引号而不是单引号。

我也在按钮之后尝试了这个但是没有用。 getElement returns null.

butId="edit-button"+(i+1);
    console.log("button id is: "+butId);
    
    document.getElementById(butId).addEventListener('click',editRow);

Answer 1

您应该交换使用单引号和双引号，以便字符串 editButtonHTML 被单引号包围，并且字符串中的 HTML 在所有标记周围使用双引号属性。

rowNumber = i+1;
var editButtonHTML = '<input type="button" value="Edit" class="edit" id="edit-button"'+ rowNumber +' onclick="editRow(' + rowNumber + ')">';

也就是说，您可能需要重新考虑将 HTML 直接输出为字符串，而是使用 jQuery 将新按钮对象附加到 DOM 以创建按钮，设置标签属性，并定义onclick事件动作。

Answer 2

代码有问题

最初未定义对象信息。
错误调用了编辑方法，无论您单击什么按钮，它都会显示相同的消息。
虽然第 4 行不存在，但它正在返回 "inside editRow 4"。 "inside editRow 4" 是使用 for 循环的最后一个 I 值创建的。
还要检查 table 中是否定义了空白的 tr 标签。否则 row.insertRow 功能将不起作用。

var info = [{
  "firstName": "aaa",
  "lastName": "A"
}, {
  "firstName": "bbb",
  "lastName": "B"
}, {
  "firstName": "ccc",
  "lastName": "C"
}];
var table = document.getElementById("table");
var storageLength = info.length;

for (var i = 0; i < info.length; i++) {
  var row = table.insertRow(i + 1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);

  cell1.innerHTML = info[i].firstName;
  cell2.innerHTML = info[i].lastName;

  var editButtonHTML = "<input type=button value=Edit class=edit id=edit-button" + (i + 1) + " onclick=\'editRow(" + (i + 1) + ")\'>";

  cell3.innerHTML = editButtonHTML;
} //end for
   //Made an edit here
function editRow(rowindex)
{
    console.log("inside editRow "+(rowindex));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table id="table" border='1'>
  <tr></tr>
</table>

Answer 3

在您的示例中，当您将 DOM 元素作为字符串添加时，单击时您将在全局 (window) 上下文中调用 'editRow' 函数。

您应该做的是创建元素，将上下文与所需参数绑定并将其附加为子 DOM 元素：

var editButtonHTML = document.createElement('input');
editButtonHTML.type = 'button';
editButtonHTML.value = 'Edit';
editButtonHTML.className = 'edit';
editButtonHTML.id = 'edit-button' + (i+1);
editButtonHTML.onclick = editRow.bind(this, i + 1);
cell3.appendChild(editButtonHTML);

这是完整的解决方案：

var info = [{
  "firstName": "aaa",
  "lastName": "A"
}, {
  "firstName": "bbb",
  "lastName": "B"
}, {
  "firstName": "ccc",
  "lastName": "C"
}];

function display(info) {
  var table = document.getElementById("table");
  var Length = info.length;

  for(var i = 0; i < info.length; i++){
      var row = table.insertRow(i);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);

      cell1.innerHTML = info[i].firstName;
      cell2.innerHTML = info[i].lastName;

      var editButtonHTML = document.createElement('input');
      editButtonHTML.type = 'button';
      editButtonHTML.value = 'Edit';
      editButtonHTML.className = 'edit';
      editButtonHTML.id = 'edit-button' + (i + 1);
      editButtonHTML.onclick = editRow.bind(this, i + 1);
      cell3.appendChild(editButtonHTML);
  }

  function editRow(num){
      console.log('inside editRow ' + num);
  }
}

display(info);

Answer 4

这段代码对我有用，请试试这个

    function display(info) {
var table=document.getElementById("table");
var Length=info.length;


    for(var i=0; i<info.length; i++)
    {
        var row = table.insertRow(i+1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);

        cell1.innerHTML = info[i].firstName;
        cell2.innerHTML = info[i].lastName;

       var editButtonHTML = "<input type=button value=Edit class=edit id=edit-button"+(i+1)+" onclick='editRow("+(i+1)+")'>";

        cell3.innerHTML=editButtonHTML;
    }//end for  
}

然后下一个 editRow 函数错过了参数

   function editRow(i)
{
    console.log("inside editRow "+(i+1));
}

HTML onclick 事件不适用于在单元格中创建按钮的内部 HTML 语法

HTML onclick event not working with innerHTML syntax for creating the button in the cell

javascript

firefox

dom-events

firefox-addon-sdk

firefox-addon-webextensions