複数のtableに対して任意のtd要素をクリックすると
イベントが発火するということをしたかったのですが、
たどりつくまで時間がかかりました。
最初に試したコード
document.querySelector('table').addEventListener('click', (e) => {
if (e.target.nodeName === 'TD') {
var strTarget = e.target.textContent;
alert(strTarget);
}
});
htmlの一番目に記載のtableではtd要素のテキストをアラート表示できました。
二番目以降はイベントが発火していませんでした。
querySelectorは同一要素が複数存在する場合一番目の要素に対してのみ効果があるそうです。
querySelectorAllが必要らしいです。
document.querySelectorAll('table').addEventListener('click', (e) => {
if (e.target.nodeName === 'TD') {
var strTarget = e.target.textContent;
alert(strTarget);
}
});
しかしこう書くとエラーがでました。
forEachが必要らしいです。
さらにいろいろ調べて、ベストプラクティスかわかりませんが
以下で問題が解決しました。
document.querySelectorAll('table').forEach(function(table) {
table.addEventListener('click', (e) => {
if (e.target.nodeName === 'TD') {
var strTarget = e.target.textContent;
alert(strTarget);
}
});
});
これで何番目のtableでも、
クリックされたtableのtd要素にイベントが発生します。
もちろんアラートが複数発生ということもありません。
参考になれば。