How to append a button with onclick event that fires a function to a table cell
Question
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.
3 answers
solution1
0 ACCPTED 2017-05-28 10:41:48
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>
solution2
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. ( How do JavaScript closures work? )
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.
A simple edit would be:
editbtn.onclick = (function(index) {
editRow(index);
})(i);
solution3
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)
})
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.