Get custom attributes from click event of table's cell

I have a table in HTML looks like this:

<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>

I am trying to use this snipped code to get custom attribute (data-time) of each cell in table but actually it doesn't work

    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'));   
            });
        }
    }

Browser tell me only:(happened when I click in table cell)

Uncaught TypeError: Cannot read property 'getAttribute' of undefined

Can someone help me understand why, and how to solving this problem?

Solution

change this from createElement to var node = document.getElementById("cal_body" ); and inside the event listener you need to have this as scope is getting changed in the function passed;

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>