如何将 EventListener 添加到表格单元格

Question

我想向表格单元格添加一个 eventListener，以便每次单击表格单元格时执行一个函数。

 var getDaysInMonth = function (year, month) {
    return new Date(year, month, 0).getDate();
}

var calendar = {
    month: function () {
        var d = new Date();
        return d.getMonth() + this.nextMonth;
    },

    year: function () {
        var y = new Date();
        return y.getFullYear();
    },

    nextMonth: 1,

    cellColor: 'white',

}

var loopTable = function () {
    var daysInMonth = getDaysInMonth(calendar.year(), calendar.month());
    var table = document.getElementById('myTable');
    var rows = table.rows;
    var l = 1;
    var month = calendar.month();
    var year = calendar.year();
    var firstDay = new Date(year + "-" + month).getDay();
    var currentDay = new Date().getDay();
    var dayOfMonth = new Date().getDate();


    for (let i = 1; i < rows.length; i++) {

        if (rows[i] == rows[1]) {

            var k = 1;

            for (let j = firstDay; j < rows[i].cells.length; j++) {

                if (k === dayOfMonth && calendar.nextMonth === 1) {
                    rows[i].cells[j].style.backgroundColor = calendar.cellColor;


                }

                if (k <= daysInMonth) {
                    rows[i].cells[j].innerHTML = k;
                    k++
                }

            }
        } else {
            for (let j = 0; j < rows[i].cells.length; j++) {
                if (k === dayOfMonth && calendar.nextMonth === 1) {
                    rows[i].cells[j].style.backgroundColor = calendar.cellColor;
                }
                if (k <= daysInMonth) {
                    rows[i].cells[j].innerHTML = k;
                    k++
                }
            }
        }
    }
}

loopTable();
clickCell();

function monthTitle() {

    var monthsArray = ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.', 'Sept.', 'Oct.', 'Nov.', 'Dec.'];
    monthNum = calendar.month();
    var monthName = monthsArray[calendar.month() - 1] + '' + calendar.year();
    var title = document.getElementById('calendarTitle');
    var nextArrow = document.getElementById('nxt');
    var leftArrow = document.getElementById('prev');


    if (monthName === ('Dec.' + '' + calendar.year())){
        xmas();
    }
    if (monthNum >= 12) {
        nextArrow.className += ' inactiveLink';
    } else if (monthNum <= 1) {
        leftArrow.className += ' inactiveLink';
    } else {
        nextArrow.classList.remove('inactiveLink');
        leftArrow.classList.remove('inactiveLink');
    }

    title.innerHTML = '';
    var titleNode = document.createTextNode(monthName);
    title.appendChild(titleNode);

}
monthTitle();

function nextMonth() {
    clearTable();
    calendar.nextMonth += 1;
    monthTitle();
    loopTable();
}

function previousMonth() {
    clearTable();
    calendar.nextMonth -= 1;
    monthTitle();
    loopTable();
}

function clearTable() {
    var table = document.getElementById('myTable');
    var rows = table.rows;

    for (var i = 1; i < rows.length; i++) {
        cells = rows[i].cells;
        for (var j = 0; j < cells.length; j++) {
            if (cells[j].innerHTML = '') {
                cells[j].style.display = 'none';
            }
            cells[j].innerHTML = '';
            cells[j].style.backgroundColor = '#D9534F';
            cells[j].style.emptyCells = 'hide';
        }
    }
}

var next = document.getElementById('nxt');
var previous = document.getElementById('prev');
var table = document.getElementById('myTable');
var cell = table.rows;
next.addEventListener('click', nextMonth);
previous.addEventListener('click', previousMonth);

function clickCell() {
    var row = document.getElementById('myTable').rows;

    for (var i = 0; i < row.length; i++) {
        for (var j = 0; j < row[i].cells.length; j++ ) {

            row[i].cells[j].addEventListener('click', function(){
  					console.log('click');
            })
        }
    }
}
clickCell();

 body {
            background-color: rgb(0, 121, 191);
        }

        table {
            width: 50%;
            background-color: #D9534F;
            border: 1px solid white;
            padding: 10px;
            padding-bottom: 20px;
            font-size: 25px;
            border-radius: 25px;
            position: relative;
            margin: auto;
        }

        td {
            border: 1px solid white;
            text-align: center;
            font-weight: 600;
            font-size: 20px;
            padding: 20px;
        }

        th {
            height: 50px;
        }

        .calArrows {
            text-decoration: none;
            color: white;
            font-size: 35px;
        }

        #nxt {
            font-size: 30px;
            position: absolute;
            top: 0;
            right: 25%
        }

        #prev {
            font-size: 30px;
            position: absolute;
            top: 0;
            left: 25%;
        }

        #calendarTitle {
            font-family: 'Indie Flower', cursive;
            font-weight: 600;
            font-size: 25px;
            color: white;
        }

        .inactiveLink {
            cursor: not-allowed;
            pointer-events: none;

        }

        #myTable {
            empty-cells: hide;
        }

        .xmasDec {
            width: 90%;
            height: 70%;
            position: absolute;
            top: -10%;
            left: 5%;
        }

        #calWraper {
            position: relative;
        }

        #myCan {
            position: absolute;
            top: 0;
            left: 10%;
            width: 90%;
            height: 70%;
            opacity: 0, 5;
        }

 <body>
    <canvas class="myCan" width="100" height="100"></canvas>
    <div id="calWraper">
        <table id="myTable">
            <caption id="calendarTitle">Test</caption>
            <tr>
                <th>Sun</th>
                <th>Mon</th>
                <th>Tue</th>
                <th>Wed</th>
                <th>Thur</th>
                <th>Fri</th>
                <th>Sat</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
        <canvas id="myCan" width="200" height="200" style="background-color: transparent"></canvas>
            <a href="#" id="prev" class="calArrows"><i class="fa fa-arrow-left" ></i></a>
        <a href="#" id="nxt" class="calArrows"><i class="fa fa-arrow-right" ></i></a>

    </div>

</html>

我尝试创建一个函数，它将遍历行和单元格并将 eventListener 添加到每个 .但它似乎不起作用，它在随机实例上工作，这确实是一种奇怪的行为。这是我创建的功能：

 function clickCell() {
    var row = document.getElementById('myTable').rows;
 for (var i = 0; i < row.length; i++) {
        for (var j = 0; j < row[i].cells.length; j++ ) {
                    console.log(row[i].cells[j].innerHTML);
            row[i].cells[j].addEventListener('click', function(){
                    console.log('click');
            })
        }
    }
}

原文由 Christodoulou Andreas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的画布似乎与您的桌子重叠。因此 td 表中的元素永远不会被点击。

您需要将 CSS 属性 pointer-events:none 添加到画布。

 #myCan {
    ...
   pointer-events: none;
}

这样它就不会再阻止表格被点击了。

您还可以更简单地将事件侦听器添加到您的单元格中：

 document.querySelectorAll('#myTable td')
.forEach(e => e.addEventListener("click", function() {
    // Here, `this` refers to the element the event was hooked on
    console.log("clicked")
}));

这为每个单元格创建了一个单独的函数；相反，您可以共享一个功能而不会丢失任何功能：

 function clickHandler() {
    // Here, `this` refers to the element the event was hooked on
    console.log("clicked")
}
document.querySelectorAll('#myTable td')
.forEach(e => e.addEventListener("click", clickHandler));

---

一些浏览器在 forEach 返回的 HTMLCollection 上仍然没有 querySelectorAll ，但它很容易填充：

 if (!HTMLCollection.prototype.forEach) {
    Object.defineProperty(HTMLCollection.prototype, "forEach", {
        value: Array.prototype.forEach
    });
}

如果您必须支持没有 Array.prototype.forEach 的真正过时的浏览器，请参阅 MDN 上的 polyfill。

原文由 Krzysztof Atłasik 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是 事件委托 的情况：在表格（或表格主体）上挂钩点击事件，而不是单个单元格，然后通过查看 event.target 及其祖先来确定单击了哪个单元格。

简化示例：

 document.querySelector("#my-table tbody").addEventListener("click", function(event) {
  var td = event.target;
  while (td !== this && !td.matches("td")) {
      td = td.parentNode;
  }
  if (td === this) {
      console.log("No table cell found");
  } else {
      console.log(td.innerHTML);
  }
});

实时复制：

 document.querySelector("#my-table tbody").addEventListener("click", function(event) {
  var td = event.target;
  while (td !== this && !td.matches("td")) {
      td = td.parentNode;
  }
  if (td === this) {
      console.log("No table cell found");
  } else {
      console.log(td.innerHTML);
  }
});

 table, td, th {
  border: 1px solid #ddd;
}
table {
  border-collapse: collapse;
}
td, th {
  padding: 4px;
}

 <table id="my-table">
  <thead>
    <tr>
      <th>First</th>
      <th>Last</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Joe</td>
      <td>Bloggs</td>
    </tr>
    <tr>
      <td>Muhammad</td>
      <td>Abdul</td>
    </tr>
    <tr>
      <td>Maria</td>
      <td>Gonzales</td>
    </tr>
  </tbody>
</table>

请注意，您可以在元素上使用新的（实验性的） closest 方法代替循环：

 var td = event.target.closest("td");

…但是 A) 它仍然是实验性的，并且 B) 当它到达 tbody 时它不会停止，所以理论上如果你有嵌套表，会找到错误的单元格。

如果您需要支持没有 Element.prototype.matches 的浏览器，在这种特定情况下，您可以使用 td.tagName !== "TD" 而不是 !td.matches("td") （注意大写）。

原文由 T.J. Crowder 发布，翻译遵循 CC BY-SA 3.0 许可协议