Question

目标是在单击单元格时更改单元格的颜色。我的js代码如下。正如您所看到的，我尝试了style.backgroundColor，但只有正确的底部单元格改变了它的颜色，无论点击的单元格如何。

＆＃13;

var board = document.getElementById("tab"),
    lvl1 = {rows: 5, cols: 5};
for(var i=0; i<lvl1.rows; i++){
  var row=board.insertRow();
  for(var j=0; j<lvl1.cols; j++) {
    var cell = row.insertCell();
  }       
}
board.onclick = function(e) {
  var cellIndex = e.target.cellIndex;
  var rowIndexx = e.target.parentNode.rowIndex;
  console.log(cellIndex + ".." + rowIndexx);
  cell.style.backgroundColor = "red";
};

＆＃13;

table { margin: 0 auto; }
td {
  height: 20px;
  width: 20px;
  border: 1px solid;
  cursor: pointer;
}

＆＃13;

<table id="tab"></table>

＆＃13;

Answer 1

替换：

cell.style.backgroundColor="red";

与

e.target.style.backgroundColor="red";

这将设置所点击内容的背景，这将是您的元素。另一种方法是在单元格周围保留一个二维数组（单元格[row] [column]），以便使用索引获得正确的单元格。

如何更改单元格的背景颜色javascript

1 个答案: