如何在onclick事件中附加一个按钮，将一个函数触发到一个表格单元格中 [英] How to append a button with onclick event that fires a function to a table cell
问题描述
var info = [{
firstName：aaa，
lastName：
，{
firstName：bbb，
lastName：B
}，{
firstName：ccc ，
lastName：C
}];
var table = document.getElementById（table）;
var storageLength = info.length; （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 =编辑;
editbtn.onclick ='editRow（i + 1）';
cell3.appendChild（editbtn）; //追加<按钮>到< body>
} // end for
function editRow（rowindex）
{
console.log（inside editRow+（rowindex））;
HTML：
< table id =tableborder ='1'>
< tr>< / tr>
< / table>
编辑：
如果您可以提供解决方案
var editButtonHTML =
（i + 1）+onclick ='editRow（+（i + 1） +）>;
cell3.innerHTML = editButtonHTML;
这个方法使按钮显示正常的大小，但我唯一的问题是，我没有得到的功能，这个问题出现在firefox插件使用jpm。在浏览器中，我怀疑它们的语法应该是'onclick = ..'，而单引号不是double。当我检查HTML时，它会自动使单引号成为双精度，即使我使用\来转义它们。 >
innerHTML 不是值
这是解决方案按钮 editbtn.innerHTML =EDIT;
添加点击事件 editbtn .onclick =（function（i）{return function（）{editRow（i + 1）}}）（i）;
$ b
需要将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 =编辑; editbtn.innerHTML =编辑; editbtn.onclick =（function（i）{return function（）{editRow（i + 1）}}）（i）; cell3.appendChild（editbtn）; //追加<按钮> 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 =tableborder ='1'> < tr>< / tr>< / p>< / code>< / pre>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. 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).
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>
EDIT:
If you can provide me with a solution for using:
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. With innerHTML, the event get fired when I open the page normally in the browser. I suspect that they syntax should be 'onclick=..' with single quotation not double. When I inspect the HTML, it automatically makes the single quotations as doubles even if I use \ to escape them.
解决方案 use innerHTML not value
this is solution for button editbtn.innerHTML = "EDIT";
to add click event editbtn.onclick = (function(i){ return function(){ editRow(i+1)}})(i);
We need to bind i value to that onclick function. 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>
这篇关于如何在onclick事件中附加一个按钮，将一个函数触发到一个表格单元格中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录 关闭
