Question

我已在HTML中预定义了这样的表格：

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

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

我用JS动态填满整个表格（thead和tbody）。

问题是，我想将EventListener添加到表的每个 < > 元素中，所以当我点击它时 - 应该发生一些事情。但是，我的代码不起作用：

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

但是当我 console.log（document.getElementById（'tableHeader'）。childNodes [0]）; 时 - 它首先正确显示 th 元素，所以（正如您在屏幕上看到的那样，它是 <th> PRODUCENT </th> 。为什么然后EventListener没有捕获任何东西？

整个表格如下：http://imgur.com/vCUHTe7

Answer 1

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

标签 - http://www.w3schools.com/tags/tag_th.asp

HTML

<div id="products">
<table>
      <thead id="tableHeader">
           <tr>
               <th>
                   PRODUCTS
              </th>
          </tr>                      
      </thead>

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

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>

Answer 2

首先从th获取所有thead元素，然后使用addEventListener循环将th添加到所有forEach。请尝试以下方法：

var th = document.querySelectorAll('#tableHeader th')
th.forEach(function(thEl){
  thEl.addEventListener('click', function(e){
    var t = e.currentTarget;        
    console.log(t);
    //or simply use this
    //console.log(this);
  });
});

thead th{
  cursor: pointer;
}
thead th:nth-child(odd){
  background: #b4bac4;
}
thead th:nth-child(even){
  background: #efdf94;
}

<div id="products">
  <table>
    <thead id="tableHeader">
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </thead>

    <tbody>
    </tbody>
  </table>
</div>

EventListener在表的''thead'元素上没有看到'click'事件

2 个答案: