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

Question

我在 HTML 中得到了一个 table 看起来像

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

我正在尝试使用这个片段代码来获取 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'));   
            });
        }
    }

浏览器只告诉我：（当我点击 table 单元格时发生）

Uncaught TypeError: Cannot read property 'getAttribute' of undefined

有人帮我理解为什么..？？以及如何解决这个问题非常感谢..

Answer 1

只是小mistake:D 替换一个

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

来自

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

这会起作用..:D 抱歉

Answer 2

试试这个：

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 3

将其从 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 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
}

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

get custom attributes from click event of table's cell

javascript

javascript-events