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

How to addEventListener to table cells

提问by Christodoulou Andreas

I'want to add an eventListener to the table cells so each time a table cell is clicked to execute a function .

我想向表格单元格添加一个 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>

I tried by creating a function that it will loop through rows and cells and add the eventListener to each . But it seems that its not working , its working on random instances which is really strange behavior . Here is the function i create:

我尝试通过创建一个函数来循环遍历行和单元格并将 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');
            })
        }
    }
}

回答by Krzysztof At?asik

It seems your canvas is overlapping your table. Because of that tdelements in your table are never clicked.

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

You will need to add CSS property pointer-events:noneto your canvas.

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

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

This way it won't block table from being clicked anymore.

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

You can also add event listeners to your cells way simpler:

您还可以更简单地向单元格添加事件侦听器：

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

That creates a separate function for each cell; instead, you could share one function without losing any functionality:

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

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

---

---

Some browsers still don't have forEachon the HTMLCollection returned by querySelectorAll, but it's easily polyfilled:

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

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

If you have to support truly obsolete browsers that don't have Array.prototype.forEach, see the polyfill on MDN.

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

回答by T.J. Crowder

This is a case for event delegation: Hook the click event on the table (or table body), not individual cells, and then determine which cell was clicked by looking at event.targetand its ancestors.

这是事件委托的一个案例：将点击事件钩在表格（或表格主体）上，而不是单个单元格上，然后通过查看event.target和它的祖先来确定点击了哪个单元格。

Simplified example:

简化示例：

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

Live Copy:

实时复制：

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>

Note that instead of the loop you could use the new (experimental) closestmethod on elements:

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

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

...but A) It's still experimental, and B) It won't stop when it reaches the tbody, so in theory if you had nested tables, would find the wrong cell.

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

If you need to support browsers that don't have Element.prototype.matches, in this specific case you could use td.tagName !== "TD"instead of !td.matches("td")(note the capitalization).

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

回答by Akshay Nair

Using only the DOM objects

仅使用 DOM 对象

Here's an example cell wise event listener added on an HTML table (TicTacToe). It can be achieved easily using 'this' keyword and 'querySelectorAll'

这是在 HTML 表 (TicTacToe) 上添加的单元智能事件侦听器示例。可以使用“this”关键字和“querySelectorAll”轻松实现

The logic is in the JavaScript file:

逻辑在 JavaScript 文件中：

1. First, get all the cells by their 'tag' ("td") using 'querySelectorAll' and save it as a list
2. Add an event listener to each of the cells, and give a function name to do whatever you want
3. Inside the event listener function, using this keyword update the cell content, or call other functions or do whatever task you have to complete.

1. 首先，使用“querySelectorAll”通过“标签”（“td”）获取所有单元格并将其保存为列表
2. 为每个单元格添加一个事件侦听器，并给出一个函数名称以执行您想要的任何操作
3. 在事件侦听器函数内部，使用此关键字更新单元格内容，或调用其他函数或执行您必须完成的任何任务。

var cells = document.querySelectorAll("td");

for (var cell of cells) {
  cell.addEventListener('click', marker)
}

function marker() {
  if (this.textContent === 'X') {
    this.innerHTML = "O";
  } else if (this.textContent === 'O') {
    this.innerHTML = " ";
  } else {
    this.innerHTML = "X";
  }
}

td {
  text-align: center;
  font-size: 50px
}

table,
th,
td {
  border: 2px solid black;
  width: 300px;
  height: 100px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">

  <title>Tic Tac Toe</title>

</head>

<body>
  <table id="ticTac">
    <tbody>
      <tr>
        <td>. </td>
        <td>. </td>
        <td>. </td>
      </tr>

      <tr>
        <td>. </td>
        <td>. </td>
        <td>. </td>
      </tr>
      <tr>
        <td>. </td>
        <td>. </td>
        <td>. </td>
      </tr>
    </tbody>
  </table>

</body>

</html>