Javascript 将事件分配给a<；td>；通过一个函数生成一个单元格

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

行[row#].cells[cell#].id='foo'

并将其显示在和函数的表格中；但以下内容不会出现在屏幕上：

行[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>

添加行
A列
B栏
项目1
//我希望函数生成的td示例
项目2
//将行添加到表中并将属性指定给新行的代码
函数addRow（）{
var table=document.getElementById（“示例表”）；
var lastRow=table.length；
var numberOfCols=table.rows[0].cells.length；
var行=table.insertRow（lastRow）；
对于（var i=0；i两件事：

onclick
需要一个函数。因此，要解决您的问题，请更改

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

到

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

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

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

.onclick='callEvent(this)'

因此，当
click
事件发生时，实际上不会调用任何函数

接下来，您不应该在JavaScript中使用事件属性（如
onclick
），也不应该添加内联HTML事件处理属性（该技术已有20年历史），因为它们：

创建难以阅读和调试的“意大利面代码”
导致代码重复
不能很好地扩展
不要遵循开发方法
围绕属性值创建匿名全局包装函数，这些属性值改变回调函数中的
this
绑定
不要遵循
相反，使用JavaScript完成所有工作，并使用设置事件处理程序

另外（仅供参考）
id
属性需要是唯一的，因此在创建新行或单元格时，不要重用已分配的
id

下面是一个例子：


//将所有这些放在
//结束正文（）
//获取要使用的所有元素的引用
var btnAddRow=document.getElementById（“btn添加行”）；
var tbl=document.getElementById（“示例表”）；
//现在，设置事件处理函数
btnAddRow.addEventListener（“单击”，添加行）；
//将行添加到表中并将属性指定给新行的代码
函数addRow（）{
var counter=1；//id属性必须是唯一的。这将保持这种状态。
var numberOfCols=tbl.rows[0].cells.length；
var row=tbl.insertRow（）；
对于（var i=0；i

td{边框：1px纯黑；}
td:n子（2）{cursor:pointer；}
添加行
A列
B栏
项目1
项目2
缺少第二个括号结尾，使用此callEvent（this）时不带单个倒逗号。
这样地。。。
//将行添加到表中并将属性指定给新行的代码
函数addRow（）{
var table=document.getElementById（“示例表”）；
var lastRow=table.length；
var numberOfCols=table.rows[0].cells.length；
var行=table.insertRow（lastRow）；
对于（var i=0；iis您试图在字符串上方添加的
onclick
？这必须是一个函数。请尝试
onclick=callEvent
。我感谢您的反馈以及我不应该以这种方式处理添加行的原因。问题的目的是如何在单击“添加行”按钮后将事件绑定到新行中的特定单元格on.@jeffm我已更新了我的答案，以显示一个单击事件处理程序被添加到每一新行的最后一个单元格中。因为我们没有使用
onclick
，而是使用更标准的
。addEventListener（）
，所以该过程工作起来很容易。您会注意到，代码不会尝试将
此
传递到回调中（因为
这个
可能并不总是指向同一个对象）并且回调不是作为字符串提供的，而是作为实际的函数引用提供的。感谢您花时间解释，我从您的响应中学到了很多东西。
table.rows[I]。onclick=callEvent（这个）；
不正确。这将立即调用
callEvent
函数，该函数的返回值（在本例中为零）将成为
onclick
属性的值。如果要使用
onclick
（而且不应该使用，则应使用
.addEventListner（）
相反），行需要是：
table.rows[i].onclick=function（）{callEvent（this）；}
。
.onclick='callEvent(this)'

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>