получить пользовательские атрибуты события нажатия ячейки таблицы

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

Browser скажи только: (случилось, когда я нажимаю в ячейку таблицы)

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>

Answer 2

Просто только небольшая ошибка: D заменить

console.log(cells[i].getAttribute('data-time')); 

по

console.log(this.getAttribute('data-time')); 

это будет работать ..: D К сожалению,

Answer 3

Попробуйте следующее:

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 (e) { 
        console.log(e.target.getAttribute('data-time')); 
       }); 
      } 
     } 

Переменная i не существует в слушателе. Вы можете использовать параметр события, чтобы вместо этого получить цель. Кроме того, я сменил начало на document.getElementById. Я не был уверен, почему вы использовали createElement.

Answer 4

Вот что вы должны сделать в сыром JavaScript.

// solve potential load issues 
var pre = onload; 
onload = function(){ 
if(pre)pre(); 

// pertinent code below 
var doc = document; 
function E(e){ 
    return doc.getElementById(e); 
} 
var tds = E('cal_body').getElementsByTagName('td'); 
for(var i=0,l=tds.length; i<l; i++){ 
    // closure to prevent possible scope issues when code is added later 
    (function(i){ 
    var td = tds[i]; // without closure i will be at end of loop onclick 
    td.onclick = function(){ 
     // this refers to td Object - same as td 
     console.log(this.dataset.time); 
    } 
    })(i); 
} 

// end onload 
}