如何将带有onclick事件的按钮附加到将函数触发到表格单元格
[英]How to append a button with onclick event that fires a function to a table cell
问题描述
I am struggling with adding a button to a table cell. 
我正在努力为表格单元格添加一个按钮。 The button should fire a function by calling its name and sending it two arguments. 该按钮应通过调用函数名称并向其发送两个参数来触发该函数。 Can anyone show a simple example. 任何人都可以举一个简单的例子。 This is what I tried to do but it has two problems: 1) the button appear so small almost invisible. 这是我尝试做的，但是有两个问题：1）按钮看起来很小，几乎看不见。 2) The event never fires (also the function is big and I want it to be called by its name because I want to place its body outside). 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: HTML：
<table id="table" border='1'>
<tr></tr>
</table>
EDIT: If you can provide me with a solution for using: var editButtonHTML = " 编辑：如果可以为我提供使用的解决方案：var editButtonHTML =“
(i + 1) + " onclick='editRow(" + (i + 1) + ")'>";
cell3.innerHTML=editButtonHTML;
That would be better as this method makes the button appear in the normal size. 这样做会更好，因为此方法可使按钮以正常大小显示。 But my only problem is that I'm not getting the function fired. 但是我唯一的问题是我没有启动该功能。 This problem appears in firefox addon using jpm. 使用jpm在firefox插件中出现此问题。 With innerHTML, the event get fired when I open the page normally in the browser. 使用innerHTML，当我在浏览器中正常打开页面时会触发该事件。 I suspect that they syntax should be 'onclick=..' with single quotation not double. 我怀疑它们的语法应为“ onclick = ..”，单引号不能为双引号。 When I inspect the HTML, it automatically makes the single quotations as doubles even if I use \\ to escape them. 当我检查HTML时，即使我使用\\对其进行转义，它也会自动使单引号成为双引号。
3 个解决方案
解决方案1
0 已采纳 2017-05-28 10:41:48
use innerHTML not value 使用innerHTML不是value
this is solution for button editbtn.innerHTML = "EDIT"; 这是按钮editbtn.innerHTML = "EDIT";解决方案editbtn.innerHTML = "EDIT"; to add click event editbtn.onclick = (function(i){ return function(){ editRow(i+1)}})(i); 添加点击事件editbtn.onclick = (function(i){ return function(){ editRow(i+1)}})(i);
We need to bind i value to that onclick function. 我们需要将i值绑定到该onclick函数。 the above function does that. 以上功能可以做到这一点。
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>
解决方案2
0 2017-05-28 11:17:40
In order to solve the issue of editRow printing out the correct row number, you need to use some form of closure. 为了解决editRow打印出正确行号的问题，您需要使用某种形式的闭包。 ( How do JavaScript closures work? ) （ JavaScript闭包如何工作？ ）
What's happening now is that the function's parameter is bound to i , which changes value to 4 by the end of the loop, so every function will be passed 4 as a parameter. 现在发生的是该函数的参数绑定到i ，该i到循环结束时将值更改为4，因此每个函数将作为参数传递4。
A simple edit would be: 一个简单的编辑将是：
editbtn.onclick = (function(index) {
editRow(index);
})(i);
解决方案3
0 2018-08-03 08:18:14
If you want to add a edit button to each table cell, you can do something like this 如果要向每个表格单元格添加编辑按钮，则可以执行以下操作
$('.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)
})
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.