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

试试这个：

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在侦听器中不存在。您可以使用event参数来获取目标。另外，我将start更改为document.getElementById。我不确定你为什么使用createElement。

Answer 2

将此值从createElement更改为var node = document.getElementById("cal_body" );，并且在事件侦听器内部，您需要在传递的函数中更改范围时使用此值;

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

只是一个小错误：D 替换

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

通过

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

这将起作用..：D 遗憾

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
}

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

4 个答案: