javascript - 从表格单元格的点击事件中获取自定义属性

Question

我有一个 HTML 表格，如下所示:

<table >
    <tbody id="cal_body" style="opacity: 0.7;">        
        <tr>
            <td class="cal_days_bef_aft" data-time="Sun Aug 30 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">30</td>
            <td class="cal_days_bef_aft" data-time="Mon Aug 31 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">31</td>
            <td class="cal_today" data-time="Thu Oct 01 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">1</td>
            <td data-time="Fri Oct 02 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">2</td>
            <td data-time="Sat Oct 03 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">3</td>
            <td data-time="Sun Oct 04 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">4</td>
            <td data-time="Mon Oct 05 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">5</td>
        </tr>
        <tr>
            <td data-time="Tue Oct 06 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">6</td>
            <td data-time="Wed Oct 07 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">7</td>
            <td data-time="Thu Oct 08 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">8</td>
            <td data-time="Fri Oct 09 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">9</td>
            <td data-time="Sat Oct 10 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">10</td>
            <td data-time="Sun Oct 11 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">11</td>
            <td data-time="Mon Oct 12 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">12</td>
        </tr>
    </tbody>
</table>

我正在尝试使用这段代码来获取表中每个单元格的自定义属性(数据时间)，但实际上它不起作用

    var node = document.createElement("cal_body" );
    addCellsEvents(node)
    function addCellsEvents(node) {
        var cells = node.querySelectorAll('td');
        for (var i = 0; i < cells.length; i++) {        
            cells[i].addEventListener('click', function(){
                console.log(cells[i].getAttribute('data-time'));   
            });
        }
    }

浏览器只告诉我:(当我点击表格单元格时发生)

Uncaught TypeError: Cannot read property 'getAttribute' of undefined

谁能帮我理解为什么会出现这个问题，以及如何解决这个问题？

Answer 1

将其从 createElement 更改为 var node = document.getElementById("cal_body"); 并且在事件监听器内部，您需要在传递的函数中更改作用域；

var node = document.getElementById("cal_body" );
addCellsEvents(node)
function addCellsEvents(node) {
  var cells = node.querySelectorAll('td');
  for (var i = 0; i < cells.length; i++) {        
    cells[i].addEventListener('click', function(){
      console.log(this.getAttribute('data-time'));   
    });
  }
}

<table >
  <tbody id="cal_body" style="opacity: 0.7;">        
    <tr>
      <td class="cal_days_bef_aft" data-time="Sun Aug 30 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">30</td>
      <td class="cal_days_bef_aft" data-time="Mon Aug 31 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">31</td>
      <td class="cal_today" data-time="Thu Oct 01 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">1</td>
      <td data-time="Fri Oct 02 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">2</td>
      <td data-time="Sat Oct 03 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">3</td>
      <td data-time="Sun Oct 04 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">4</td>
      <td data-time="Mon Oct 05 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">5</td>
    </tr>
    <tr>
      <td data-time="Tue Oct 06 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">6</td>
      <td data-time="Wed Oct 07 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">7</td>
      <td data-time="Thu Oct 08 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">8</td>
      <td data-time="Fri Oct 09 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">9</td>
      <td data-time="Sat Oct 10 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">10</td>
      <td data-time="Sun Oct 11 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">11</td>
      <td data-time="Mon Oct 12 2015 08:32:27 GMT+0700 (SE Asia Standard Time)">12</td>
    </tr>
  </tbody>
</table>