HTMLハイパーリンクを使用して親要素のJS関数を呼び出す

Question

私は以下のようにHTMLテーブルを持っています。非ヘッダー行の最後には、コピー用と編集用の2つのリンクがあります。クリックすると、下に定義されている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はあなたがHTMLからハンドラをインストールすることで、あなたのコードを修正することができますが、あなたが本当にJSからそれを行う必要がありますwindowオブジェクト

に設定されていることです。

簡略化のために、HTML属性onclickを使用して以下の例を追加しました。

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>