如何將帶有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