将此（按钮html元素）传递给“onclick”功能[重复]答案

【问题标题】：Pass this(a button html element) to "onclick" function [duplicate]将此（按钮html元素）传递给“onclick”功能[重复]
【发布时间】：2020-12-06 20:23:32
【问题描述】：

我使用 jQuery 动态创建表格的新行：

    addRowToTable() {
        $('.table > tbody:last-child').append(
            '<tr>' +
            '<td name="name1" contenteditable="true"></td>' +
            '<td name="name2" contenteditable="true"></td>' +
            '<td name="name3" contenteditable="true"></td>' +
            '<td name="name4" contenteditable="true"></td>' +
            '<td id="save">' +
            '<button>save</button>' +
            '</td>' +
            '<td id="delete-row">' +
            '<button onclick="deleteRowFromTable($(this))">delete</button>' +
            '</td>' +
            '</tr>'
        );
    }

这是我的deleteRowFromTable(deleteRowButton)：

deleteRowFromTable(deleteRowButton) {
    $(deleteRowButton).closest('tr').remove();
}

，它与addRowToTable 方法在同一个类中。我想在onclick 属性中传递一个按钮。我尝试了onclick="deleteRowFromTable($(this))" 和onclick="deleteRowFromTable(this)" - 它们都不起作用。任何想法如何使这项工作？

【问题讨论】：

您的代码表明您正在使用相同的id（"delete-row"）创建多个元素，这将导致 HTML 无效并损害您的 JavaScript 功能。顺便说一句，与其用 JavaScript 乱扔 HTML，为什么不使用 JavaScript 来添加事件处理，通过 EventTarget.addEventListener() 或 jQuery 的 on() 方法？
虽然我同意上面大卫的评论，但这肯定不是你的问题。据我所知，您的代码应该可以工作......见CodePen。 --- 你是否使用function 关键字来声明函数？
@DavidsaysreinstateMonica 真是个好主意。会努力的，谢谢=)
@LouysPatriceBessette 我正在使用 js 类，此处不允许使用关键字“函数”

标签： javascript jquery onclick

【解决方案1】：

将 id ="delete-row" 分配给按钮并将按钮 id 'this.id' 传递给 deleteRowFromTable 函数，如下所示。

addRowToTable() {
    $('.table > tbody:last-child').append(
        '<tr>' +
        '<td name="name1" contenteditable="true"></td>' +
        '<td name="name2" contenteditable="true"></td>' +
        '<td name="name3" contenteditable="true"></td>' +
        '<td name="name4" contenteditable="true"></td>' +
        '<td id="save">' +
        '<button>save</button>' +
        '</td>' +
        '<td>' +
        '<button id="delete-row" onclick="deleteRowFromTable(this.id)">delete</button>' +
        '</td>' +
        '</tr>'
    );
}

deleteRowFromTable(id) {
    $('#'+id).closest('tr').remove();
}

【讨论】：

添加 id 不好 - 如果我添加多行，这将破坏一切