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. 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.

回答1:

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>

回答2:

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);

回答3:

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)
  })
})

来源：https://stackoverflow.com/questions/44226334/how-to-append-a-button-with-onclick-event-that-fires-a-function-to-a-table-cell

标签

javascript

firefox-addon

dom-events