如何将带有 onclick 事件的按钮附加到 table 单元格

Question

我正在努力将按钮添加到 table 单元格。该按钮应通过调用其名称并向其发送两个参数来触发函数。任何人都可以展示一个简单的例子。这是我尝试做的，但有两个问题：1) 按钮看起来很小，几乎看不见。 2) 事件永远不会触发（功能也很大，我希望通过名称调用它，因为我想将它的主体放在外面）。

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 editbtn = document.createElement('button'); 
editbtn.type= "button";
editbtn.className= "editbtn";
editbtn.id= "button-"+(i+1);
editbtn.value= "Edit";
editbtn.onclick = 'editRow(i+1)';
cell3.appendChild(editbtn);                    // Append <button> to <body> 
} //end for

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

HTML:

<table id="table" border='1'>
  <tr></tr>
</table>

编辑： 如果您能为我提供使用的解决方案： var editButtonHTML = "

(i + 1) + " onclick='editRow(" + (i + 1) + ")'>";
cell3.innerHTML=editButtonHTML;

这样会更好，因为此方法使按钮显示为正常大小。但我唯一的问题是我没有触发该功能。这个问题出现在使用 jpm 的 firefox 插件中。使用 innerHTML，当我在浏览器中正常打开页面时会触发该事件。我怀疑它们的语法应该是 'onclick=..' 单引号而不是双引号。当我检查 HTML 时，它会自动将单引号设为双引号，即使我使用 \ 来转义它们也是如此。

Answer 1

使用 innerHTML 而不是 value

这是按钮的解决方案 editbtn.innerHTML = "EDIT"; 添加点击事件 editbtn.onclick = (function(i){ return function(){ editRow(i+1)}})(i);

我们需要将 i 值绑定到那个 onclick 函数。上面的函数就是这样做的。

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 editbtn = document.createElement('button'); 
editbtn.type= "button";
editbtn.className= "editbtn";
editbtn.id= "button-"+(i+1);
editbtn.value= "Edit";
editbtn.innerHTML = "EDIT";
editbtn.onclick = (function(i){ return function(){ editRow(i+1)}})(i);
cell3.appendChild(editbtn);                    // Append <button> to <body>
} //end for

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

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

Answer 2

为了解决editRow 打印出正确行号的问题，您需要使用某种形式的闭包。 (How do JavaScript closures work?)

现在发生的事情是函数的参数绑定到 i，它在循环结束时将值更改为 4，因此每个函数都将作为参数传递 4。

一个简单的编辑是：

editbtn.onclick = (function(index) {
    editRow(index);
})(i);

Answer 3

如果你想给每个 table 单元格添加一个编辑按钮，你可以这样做

$('.tableCell').each(function() {
  $target = $(this)
  var content = $target.html()
  $button = $('<button>Edit content✏️</button>')
  $target.append($button);
  $button.on('click', function(e){
    e.preventDefault()
    e.stopPropagation()
    doMagic(content)
  })
})

如何将带有 onclick 事件的按钮附加到 table 单元格

How to append a button with onclick event that fires a function to a table cell

javascript

firefox-addon

dom-events