Javascript EventListener不'；看不见'；单击'；在''；thead'；表元素

我已经用HTML预定义了这样的表：

<div id="products">
    <table>
          <thead id="tableHeader">
          </thead>

          <tbody>
          </tbody>
    </table>
</div><!-- END of products-->

但是当我console.log（document.getElementById（'tableHeader'）.childNodes[0]）-它首先正确地显示了th元素，因此（正如您在屏幕上看到的）它是

产品

。那么为什么EventListener什么都不捕捉呢

整张桌子看起来像这样：

---

在我看来，你的表格html代码太奇怪了

th标签-

HTML

产品

Javascript

<script>
document.getElementById('tableHeader').childNodes[1].addEventListener('click', 
    function(e) {      
       var t = e.target;        
       if (t.tagName.toLowerCase() === 'th'){
           console.log(t);
     }
}, false);
</script>

document.getElementById（'tableHeader'）.childNodes[1]。addEventListener（'click'，
函数（e）{
var t=e.target；
如果（t.tagName.toLowerCase（）=='th'）{
控制台日志（t）；
}
}，假）；

首先从

thead

获取所有

th

元素，然后使用

forEach

循环将

addEventListener

添加到所有这些

th

元素中。请尝试以下操作：

var th=document.querySelectorAll（“#tableHeader th”）
th.forEach（功能（THL）{
加法器列表器（'click'，函数（e）{
var t=e.currentTarget；
控制台日志（t）；
//或者干脆用这个
//console.log（this）；
});
});
thead th{
光标：指针；
}
第四名：第n名儿童（单数）{
背景#b4bac4；
}
第四个孩子（偶数）{
背景：efdf94；
}

标题1
标题2
标题3
如何填充表格？是否在填充eventListener之后添加它？是的，我在创建表之后添加eventListener。创建表是另一个有自己循环的函数。生成的标记看起来很奇怪…
document.getElementById（'tableHeader'）。childNodes[0]
将返回一个
text
nodeIt。它不起作用，因为我创建表（尤其是标题）的方式，正如您所说的“奇怪”。我使用以下代码创建表（我假设代码太长且“不好”）：
<div id="products">
<table>
      <thead id="tableHeader">
           <tr>
               <th>
                   PRODUCTS
              </th>
          </tr>                      
      </thead>

      <tbody>
      </tbody>
</table>
</div><!-- END of products-->

<script>
document.getElementById('tableHeader').childNodes[1].addEventListener('click', 
    function(e) {      
       var t = e.target;        
       if (t.tagName.toLowerCase() === 'th'){
           console.log(t);
     }
}, false);
</script>