やりたいこと

テーブルの行をクリックしたらというイベントを取得したいです。

現在の状況

html
1<table>
2<tr id="pos1"><td>apple</td></tr>
3<tr id="pos2"><td>banana</td></tr>
4<tr id="pos3"><td>cacke</td></tr>
5</table>

javascript
1var tr_event = document.getElementById('pos1');
2
3tr_event.addEventListener('click', function(){
4    色々とやりたい処理
5　　　〜〜〜
6　　　〜〜〜
7});

結果

Uncaught TypeError: Cannot read property 'addEventListener' of null

質問

ボタンなら成功するのですが、テーブルだと失敗してしまいます。
テーブルのtrタグのidに対するイベントを取得するには何かいい方法ありませんでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<meta charset="utf-8">
4<title>?</title>
5<style>
6</style>
7
8<body>
9<table>
10<tr id="pos1"><td>apple</td></tr>
11<tr id="pos2"><td>banana</td></tr>
12<tr id="pos3"><td>cacke</td></tr>
13</table>
14
15<script>
16const fp = (e, n) => {
17  while (e) {
18    if (e.tagName === n) break;
19    e = e.parentNode;
20  }
21  return e;
22}
23
24document.addEventListener ('click', e => {
25  let tr = fp (e.target, 'TR');
26  if (tr)
27    console.log (tr.id);
28}, false);
29
30
31</script>

投稿2019/02/18 11:39

退会済みユーザー

総合スコア0

EzrealTrueshot

2019/02/18 13:41

ありがとうございます！ const fp 関数の部分がちょっとまだ理解できていませんが、じっくりと読み解いていこうと思います！期待する動きができて大変うれしいです。

YoshitakaOkada

2020/04/18 12:33 編集

「セルをクリックしたら行を取得する」って業務的にはかなりありそうなものだけど stackoverflow とかを探し回ってもなかなかなくてここにたどり着いた。数時間悩んでしまった。ので、整理を含めて勘所をメモしておきます。下のコードは私の側のコードなので、ここでのトピックには直接関与しないけどやってることは同じで、勘所としては、イベントリスナーが「e」を受け取ると「td」が取得デキル。tdの親「parentNode」を取得すると「tr」が取得できる。あとはループでまわして td をカンマ連結取得したりするべし。 ```aaa function addRowsHandler() { const table = edit_table.tBodies[0]; const rows = table.rows; for (i = 0; i < rows.length; i++) { table.rows[i].addEventListener('click', e => { let retValue = []; const tr = e.target.parentNode; for (j = 0; j < tr.cells.length; j++) { retValue.push(tr.cells[j].textContent) } console.log(retValue.join(', ')); }, false) } } ```

行動規範の内容に同意します