Question

我有一个HTML表格，如下所示。在每个非标题行的末尾，我有两个链接，一个用于复制，另一个用于编辑。单击时，它们应触发下面定义的JavaScript函数。

＆＃13;

function editRow(el) {
    //alert function added for debug purposes
    alert(el.rowIndex);
}

＆＃13;

<table>
    <tr>
        <th>Date</th>
        <th>Tools</th>
    </tr>
    <tr>
        <td>20 October 2017</td>
        <td>
            <a href="javascript:editRow(this)">Edit</a>
            <a href="javascript:copyRow(this)">Copy</a>
        </td>
    </tr>
    <tr>
        <td>19 October 2017</td>
        <td>
            <a href="javascript:editRow(this)">Edit</a>
            <a href="javascript:copyRow(this)">Copy</a>
        </td>
    </tr>
</table>

＆＃13;

但是，警告始终显示undefined。我认为这是因为超链接在文本而不是单元格上调用函数。如何将editRow(this)调用更改为在其父元素上调用它的调用？我尝试了editRow(parent)和editRow(this.parent)，但它没有做任何有用的事情。

Answer 1

您的问题是，在使用javascript: editRow(this)调用javascript时，this设置为window对象

您可以通过从HTML安装处理程序来修复代码，但您真的应该从JS执行此操作。

为简单起见，使用onclick HTML属性添加了以下示例。

＆＃13;

function editRow(obj) {
   console.log('edit handler tagname', obj.tagName);
}

function copyRow(obj) {
   console.log('copy handler parent tr rowIndex', obj.parentElement.parentElement.rowIndex);
}

＆＃13;

<table>
  <tr>
    <th>Date</th>
    <th>Tools</th>
  </tr>
  <tr>
    <td>20 October 2017</td>
    <td>
      <a onclick="editRow(this)" href="#">Edit</a>
      <a onclick="javascript:copyRow(this)" href="#">Copy</a>
    </td>
  </tr>
  <tr>
    <td>19 October 2017</td>
    <td>
      <a onclick="editRow(this)" href="#">Edit</a>
      <a onclick="copyRow(this)" href="#">Copy</a></td>
  </tr>
</table>

＆＃13;

使用HTML超链接调用父元素

1 个答案: