使用HTML超鏈接調用父元素的JS函數

Question

我有一個HTML表格，如下所示。在每個非標題行末尾，我有兩個鏈接，一個用於複製，另一個用於編輯。點擊時，它們應該觸發下面定義的JavaScript函數。

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

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

然而，警報總是說undefined。我認爲這是因爲超鏈接正在調用文本上的函數而不是單元格。如何將editRow(this)調用更改爲在其父元素上調用它的調用？我試過editRow(parent)和editRow(this.parent)，但它沒有做任何有用的事情。

Answer 1

您的問題是使用javascript: editRow(this)調用JavaScript的時候，該this被設置爲window對象

您可以通過HTML安裝處理程序解決您的代碼，但你真的應該從JS做到這一點。

爲簡單起見，在下面添加了一個使用onclickHTML屬性的示例。

function editRow(obj) { 
 
    console.log('edit handler tagname', obj.tagName); 
 
} 
 

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

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