Question

在下面的代码中，它可以正常工作，但我将 EventListener 应用于for循环中的每个 Cell ，而我只想应用一个 EventListener 到表格本身更改所选单元格的background-color。我怎么能这样做？

let height, width, color, reset;
const error = document.querySelector('#error');
function makeGrid(event) {
    event.preventDefault();
    clrGrid();
    height = document.querySelector("#inputHeight").value;
    width = document.querySelector("#inputWidth").value;
    if (height > 50 || width > 50 || height < 1 || width < 1) {
        if (!error.classList.contains("error")) {
            error.classList.toggle("error");
            error.innerText = "the dimension has to be smaller than 50 and bigger than 0";
        }
    } else {
        error.innerText = "";
        error.classList.remove("error");
        for (let x = 0; x < height; x++) {
            const tRow = document.querySelector("#pixelCanvas").insertRow(x);

            for (let y = 0; y < width; y++) {
                const tCell = tRow.insertCell(y);
                tCell.addEventListener("click", fillSquare);
            }
        }
    }
}

// Apply Color to Cells
color = document.querySelector('#colorPicker');
function fillSquare () {
    this.setAttribute("style", `background-color: ${color.value}`);
}

// Clear Canvas Grid
canvas = document.querySelector("#pixelCanvas");
function clrGrid() {
    error.innerText = "";
    error.classList.remove("error");
    while (canvas.firstChild){
        canvas.removeChild(canvas.firstChild);
   }
}

Answer 1

您可以在表格上附加点击侦听器，然后使用event.target访问单元格。

Bellow你可以找到关于如何使用它的小演示。

＆＃13;

document.getElementById('table').addEventListener('click', function(event) {
  const target = event.target;
  
  if (target.tagName.toLowerCase() === 'td') {
    target.style.background = 'blue';
  }
});

＆＃13;

<table id="table">
  <tr>
    <td>Content</td>
    <td>Content</td>
  </tr>
  <tr>
    <td>Content</td>
    <td>Content</td>
  </tr>
</table>

＆＃13;

Answer 2

使用事件委派。在表上设置事件侦听器，然后询问事件目标（作为事件源的元素）是否为单元event.target元素。如果是，则再次使用事件目标来修改单元格（在这种情况下const table = document.querySelector('table'); table.addEventListener('click', event => { if (event.target.nodeName === 'TD') { event.target.style.background = 'red'; } });将是相应的单元格元素。）

你可以在这里看到它。

＆＃13;

<table>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
  <tr>
</table>

＆＃13;

tCell.addEventListener("click", fillSquare);

＆＃13;

当您单击一个单元格时，即使只有侦听器分配给其父表，其背景颜色也会变为红色。

在你的情况下你应该删除行

fillSquare

更改function fillSquare (element) { element.setAttribute("style", `background-color: ${color.value}`); }函数，使其成为参数（元素目标）

const table = document.querySelector('select-parent-table');
table.addEventListener('click', event => {
  if (event.target.nodeName === 'TD') {
    fillSquare(event.target);
  }
});

并将事件监听器添加到表中，如下所示

.loc[]

Answer 3

当您点击表格时，首先检查它是否为td然后将背景颜色更改为您想要的颜色。

trainControl

const table = document.getElementById("table");

table.addEventListener("click", (e)=>{
 const element = e.target;
 if(element.tagName === "TD"){
  element.style.backgroundColor = "red"
 }
});

将EventListener应用于表而不是每个单元格。怎么样？

3 个答案: