Javascript爲動態表格行創建onclick事件

Question

我在將onclick事件附加到動態表格行時遇到問題。

什麼我是在這裏：

function parseOrderLine(data) { 
    var obj = JSON.parse(data); 
    if (obj.length > 0) { 
     var tbl = document.createElement('table'); 
     var row = tbl.insertRow(0); 
     var cell = row.insertCell(0); 
     cell.innerHTML = "Code"; 
     cell = row.insertCell(1); 
     cell.innerHTML = "Size"; 
     cell = row.insertCell(2); 
     cell.innerHTML = "Description"; 
     cell = row.insertCell(3); 
     cell.innerHTML = "Type"; 
     cell = row.insertCell(4); 
     cell.innerHTML = "Price"; 
     cell.style.textAlign = "right"; 
     for (var i = 0; i < obj.length; i++) { 
      row = tbl.insertRow(i + 1); 
      row.className = "results_row"; 
      cell = row.insertCell(0); 
      cell.innerHTML = obj[i].Code; 
      cell = row.insertCell(1); 
      cell.innerHTML = obj[i].Size; 
      cell = row.insertCell(2); 
      cell.innerHTML = obj[i].Description; 
      cell = row.insertCell(3); 
      cell.innerHTML = obj[i].Type; 
      cell = row.insertCell(4); 
      cell.innerHTML = parseFloat(obj[i].Price).toFixed(2); 
      cell.style.textAlign = "right"; 
      //row.addEventListener("click", function(){ alert('listen'); }); 
      row.onclick = (function(){ alert('click'); }); 
     } 
     return tbl.outerHTML; 
    } 
    else { ... 

正如你可以看到我曾經嘗試都設置了onclick事件，並添加監聽。這兩者似乎都不起作用。

我希望有人能告訴我我只是瘋了，忽略了一些明顯的東西。 ; 0）

任何幫助讚賞球員。

感謝您的閱讀。

雅

Answer 1

你的問題是關於tbl.outerHTML。

當您使用addEventListener添加事件偵聽器時，Javascript不會將該方法添加到onclick屬性中的HTML代碼中，它只會添加到DOM中。因此，當您使用tbl.outerHTML時，您的偵聽器不會添加到返回的HTML代碼中。如果你想保持事件監聽器使用outerHTML時，我建議你setAttribute走同樣是適用於row.onclick = function()...

：

function createTable() 
 
{ 
 
     var obj = [1,2,3,4,5]; 
 
     var tbl = document.createElement('table'); 
 
     var row = tbl.insertRow(0); 
 
     var cell = row.insertCell(0); 
 
     cell.innerHTML = "Code"; 
 
     cell = row.insertCell(1); 
 
     cell.innerHTML = "Size"; 
 
     cell = row.insertCell(2); 
 
     cell.innerHTML = "Description"; 
 
     cell = row.insertCell(3); 
 
     cell.innerHTML = "Type"; 
 
     cell = row.insertCell(4); 
 
     cell.innerHTML = "Price"; 
 
     cell.style.textAlign = "right"; 
 
     for (var i = 0; i < obj.length; i++) { 
 
      row = tbl.insertRow(i + 1); 
 
      row.className = "results_row"; 
 
      cell = row.insertCell(0); 
 
      cell.innerHTML = obj[i].Code; 
 
      cell = row.insertCell(1); 
 
      cell.innerHTML = obj[i].Size; 
 
      cell = row.insertCell(2); 
 
      cell.innerHTML = obj[i].Description; 
 
      cell = row.insertCell(3); 
 
      cell.innerHTML = obj[i].Type; 
 
      cell = row.insertCell(4); 
 
      cell.innerHTML = parseFloat(obj[i].Price).toFixed(2); 
 
      cell.style.textAlign = "right"; 
 
      //row.addEventListener("click", function(){ alert('listen'); }); 
 
      row.setAttribute('onclick', "(function(){ alert('click'); })()"); 
 
     } 
 
     return tbl.outerHTML; 
 
} 
 

 
document.getElementById('test').innerHTML = createTable();

<div id="test"></div>

但它不是最好的解決方案，當你想要使用你剛剛創建的對象（在你的情況下，表）時，不應該使用outerHTML。你應該使用appendChild方法在DOM中添加它，這樣，您就可以使用addEventListener：

function createTable() 
 
{ 
 
     var obj = [1,2,3,4,5]; 
 
     var tbl = document.createElement('table'); 
 
     var row = tbl.insertRow(0); 
 
     var cell = row.insertCell(0); 
 
     cell.innerHTML = "Code"; 
 
     cell = row.insertCell(1); 
 
     cell.innerHTML = "Size"; 
 
     cell = row.insertCell(2); 
 
     cell.innerHTML = "Description"; 
 
     cell = row.insertCell(3); 
 
     cell.innerHTML = "Type"; 
 
     cell = row.insertCell(4); 
 
     cell.innerHTML = "Price"; 
 
     cell.style.textAlign = "right"; 
 
     for (var i = 0; i < obj.length; i++) { 
 
      row = tbl.insertRow(i + 1); 
 
      row.className = "results_row"; 
 
      cell = row.insertCell(0); 
 
      cell.innerHTML = obj[i].Code; 
 
      cell = row.insertCell(1); 
 
      cell.innerHTML = obj[i].Size; 
 
      cell = row.insertCell(2); 
 
      cell.innerHTML = obj[i].Description; 
 
      cell = row.insertCell(3); 
 
      cell.innerHTML = obj[i].Type; 
 
      cell = row.insertCell(4); 
 
      cell.innerHTML = parseFloat(obj[i].Price).toFixed(2); 
 
      cell.style.textAlign = "right"; 
 
      row.addEventListener("click", (function(){ alert('click'); })); 
 
     } 
 
     return tbl; 
 
} 
 

 
document.getElementById('test').appendChild(createTable());

<div id="test"></div>