如何将带有onclick事件的按钮附加到将函数触发到表格单元格

Question

我正在努力为表格单元格添加一个按钮。 该按钮应通过调用函数名称并向其发送两个参数来触发该函数。 任何人都可以举一个简单的例子。 这是我尝试做的，但是有两个问题：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.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打印出正确行号的问题，您需要使用某种形式的闭包。 （ JavaScript闭包如何工作？）

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

一个简单的编辑将是：

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

Answer 3

如果要向每个表格单元格添加编辑按钮，则可以执行以下操作

$('.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事件的按钮附加到将函数触发到表格单元格

问题描述

3 个解决方案

解决方案1
0 已采纳 2017-05-28 10:41:48

解决方案2
0 2017-05-28 11:17:40

解决方案3
0 2018-08-03 08:18:14

如何将带有onclick事件的按钮附加到将函数触发到表格单元格

问题描述

3 个解决方案

解决方案1 0 已采纳 2017-05-28 10:41:48

解决方案2 0 2017-05-28 11:17:40

解决方案3 0 2018-08-03 08:18:14

解决方案1
0 已采纳 2017-05-28 10:41:48

解决方案2
0 2017-05-28 11:17:40

解决方案3
0 2018-08-03 08:18:14