通过函数将事件分配给​​单元格

Question

我试图理解为什么我可以将某些项目添加到单元格（如“id”），而不是其他项目（如onclick）。我的目标是按下一个按钮，它向表格添加一行（工作） - 并在生成/附加到表格上设置一些值。我注意到我可以进入控制台并执行以下操作：

rows [row _＃]。cells [cell _＃]。id ='foo';

并让它出现在表和函数上;但以下内容不会出现在：

rows [row _＃]。cells [cell _＃]。onclick ='callEvent（this）';

我应该分配这个不同吗？

<button type="button" id="btn_add_row" onclick="addRow()">Add Row</button> 
<table class="table table-hover" id="sample_table"> 
    <thead> 
     <th>Column A</th> 
     <th id='calculate'>Column B</th> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Item 1</td> 
      //sample of the td I'd like the function to generate 
      <td id='calculate' onclick='callEvent(this)'>Item 2</td> 
     </tr> 
    </tbody> 
</table> 


<script type="text/javascript"> 
// Code to add a row to the table and assign properties to new row 
function addRow() { 
    var table = document.getElementById("sample_table"); 
    var lastRow = table.length; 
    var numberOfCols = table.rows[0].cells.length; 
    var row = table.insertRow(lastRow); 
    for (var i=0;i<numberOfCols;i++) { 
     row.insertCell(i); 
     if (table.rows[0].cells[i].id === 'calculate') { 
// The calculate id will appear on the TD after running 
      table.rows[i].id = 'calculate'; 
// The onclick event will not appear on the TD afer running 
      table.rows[i].onclick='callEvent(this)'; 
     } 

function callEvent(element) { 
       console.log('Calculate event fired!'); 
} 
</script> 

Answer 1

最大的问题是您没有提供对您的onclick属性的回调函数引用。您提供的字符串：

.onclick='callEvent(this)' 

所以，当click事件发生时没有功能实际上被调用。

接下来，你不应该使用的事件属性（如onclick）在你的JavaScript或添加内嵌HTML事件处理在所有（即技术是20岁左右）的属性，因为它们：

1. 创建“意大利面代码“，难以阅读和调试。
2. 导致重复的代码。
3. 不能很好地扩展
4. 不按separation of concerns开发方法。
5. 围绕您的属性值创建匿名全局包装函数，这些属性值会改变回调函数中的this绑定。
6. 请勿按照W3C Event Standard。

相反，做所有的工作在JavaScript和使用.addEventListener()成立事件处理程序。

另外（FYI）id属性需要是唯一的，所以当您创建新的行或单元格时，请勿重复使用已分配的id。

下面是一个例子：

// Place all of this inside of a <script> element that is just before the 
 
// closing of the body (</body>) 
 

 
// Get references to all elements that you'll be working with 
 
var btnAddRow = document.getElementById("btn_add_row"); 
 
var tbl = document.getElementById("sample_table"); 
 

 
// Now, set up the event handling functions 
 
btnAddRow.addEventListener("click", addRow); 
 

 
// Code to add a row to the table and assign properties to new row 
 
function addRow() { 
 
    var counter = 1; // id attributes must be unique. This will keep it that way. 
 
    var numberOfCols = tbl.rows[0].cells.length; 
 
    var row = tbl.insertRow(); 
 
    for (var i = 0; i < numberOfCols; i++) { 
 
     var cell = row.insertCell(i); 
 
     cell.id = "row" + (tbl.rows.length - 1) + "cell" + counter; 
 
     
 
     // Now, we'll create a new button, place that button in the new cell and 
 
     // set up a click event handler for it. 
 
     var btn = document.createElement("button"); 
 
     btn.textContent = cell.id; 
 
     btn.id = "btn" + tbl.rows.length + counter; 
 
     
 
     // Add a click event handler 
 
     btn.addEventListener("click", function(){ 
 
      alert("You clicked cell: " + this.id); 
 
     }); 
 
     
 
     // And now include the button in the cell 
 
     cell.appendChild(btn); 
 
     
 
     counter++; // Increment the counter after using it 
 
    } 
 
}

td { border:1px solid black; } 
 

 
td:nth-child(2) { cursor:pointer; }

<button type="button" id="btn_add_row">Add Row</button> 
 
<table class="table table-hover" id="sample_table"> 
 
    <thead> 
 
     <th>Column A</th> 
 
     <th id='calculate'>Column B</th> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>Item 1</td> 
 
      <!-- sample of the td I'd like the function to generate --> 
 
      <td id='calculate'>Item 2</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Answer 2

两件事情：

的onclick期望的功能。因此，要解决你的问题，改变

table.rows[i].onclick='callEvent(this)'; 

到

table.rows[i].onclick=callEvent; 

的第二件事是，在事件的参数实际上是事件，并this指元素：

function callEvent(event) { 
    console.log('Calculate event fired!'); 
    // "event" is the event 
    // "this" is the element 
} 

Answer 3

missing need to second bracket end and use this callEvent(this) without single inverted comma. 

Like this... 

<script type="text/javascript"> 
// Code to add a row to the table and assign properties to new row 
function addRow() { 
    var table = document.getElementById("sample_table"); 
    var lastRow = table.length; 
    var numberOfCols = table.rows[0].cells.length; 
    var row = table.insertRow(lastRow); 
    for (var i=0;i<numberOfCols;i++) { 
     row.insertCell(i);  
     if (table.rows[0].cells[i].id === 'calculate') { 
// The calculate id will appear on the TD after running 
      table.rows[i].id = 'calculate'; 
// The onclick event will not appear on the TD afer running 
      table.rows[i].onclick=callEvent(this); 
     } 
    } 
} 
function callEvent(element) { 
       console.log('Calculate event fired!'); 
} 
</script>