Question

我正在尝试使用Google App脚本中的HtmlService执行此操作。我研究了它，我无法弄清楚为什么以下不起作用。 https://jsfiddle.net/pfue7b71/

脚本

function removeRow() {
  //  alert("run");
    $(this).closest('tr').remove();
};

HTML

<table>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow()" value="X"></td>
    </tr>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow()" value="X"></td>
    </tr>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow()" value="X"></td>
    </tr>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow()" value="X"></td>
    </tr>
</table>

Answer 1

这是因为该功能的上下文。在onClick属性上运行的直接代码使用对象上下文，因此它具有this作为当前对象的正确引用，但是对removeRow的调用是在Window上进行的上下文，因此对this的引用是Window，而不是对象。您可以使用当前代码解决这个问题：

function removeRow(object){
    $(object).closest('tr').remove();
};

将通话更改为：

<table>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow(this)" value="X"></td>
    </tr>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow(this)" value="X"></td>
    </tr>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow(this)" value="X"></td>
    </tr>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow(this)" value="X"></td>
    </tr>
</table>

在这里：https://jsfiddle.net/pfue7b71/2/

此外，为了将来参考，您应该尝试使用console.log代替alert，并使用它来记录重要内容，例如$(this)

Answer 2

您需要确保this引用DOM元素，而不是函数。

<table>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow(this)" value="X"></td>
    </tr>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow(this)" value="X"></td>
    </tr>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow(this)" value="X"></td>
    </tr>
    <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="button" onClick="removeRow(this)" value="X"></td>
    </tr>
</table>

您还需要将该功能重命名为removeRow，因为您在HTML中调用它（在小提琴中不正确）。

function removeRow(e) {
    $(e).closest('tr').remove();
};

https://jsfiddle.net/pfue7b71/3/

单击按钮时删除行

2 个答案: