Question

我有一个用javascript创建的表。当您点击它时，我想将单元格的颜色更改为红色。我知道我应该使用onClick事件。但我不确定如何在这项具体任务中使用它。

＆＃13;

var width = parseInt(prompt("Put width", "here"));
var height = parseInt(prompt("Put height", "here"));

function myFunction() {
  var table = document.getElementById("chessboard");
  for (var i = 0; i < height; i++) {
    var row = table.insertRow(i);
    for (var j = 0; j < width; j++) {
      row.insertCell(j);
    }
  };
}

＆＃13;

#chessboard {
  border: 1px solid black;
  border-collapse: collapse
}
td {
  width: 40px;
  height: 40px
}
tr:nth-child(odd) td:nth-child(even) {
  background: black
}
tr:nth-child(even) td:nth-child(odd) {
  background: black
}

＆＃13;

<body onload="myFunction()">
  <div>
    <table id="chessboard"></table>
  </div>
</body>

＆＃13;

Answer 1

您可以为每个向其添加selected类的单元格添加onclick侦听器。您还需要跟踪之前选择的内容，以便从中删除selected类：

＆＃13;

var width = parseInt(prompt("Put width", "here"));
var height = parseInt(prompt("Put height", "here"));

// tracks the selected cell
var selectedCell = null;

// handles the clicks
function selectCell() {
  // remove from previous if there is one
  if (selectedCell != null) {
    selectedCell.classList.remove('selected');
  }

  // mark cell as selected
  selectedCell = this;
  this.classList.add('selected');
}

function myFunction() {
  var table = document.getElementById("chessboard");
  for (var i = 0; i < height; i++) {
    var row = table.insertRow(i);
    for (var j = 0; j < width; j++) {
      var cell = row.insertCell(j);
      // bind the selectCell function to this cell
      cell.onclick = selectCell.bind(cell);
    }
  };
}

＆＃13;

#chessboard {
  border: 1px solid black;
  border-collapse: collapse
}
td {
  width: 40px;
  height: 40px
}
tr:nth-child(odd) td:nth-child(even) {
  background: black;
}
tr:nth-child(even) td:nth-child(odd) {
  background: black;
}
td.selected {
  background: red !important;
}

＆＃13;

<body onload="myFunction()">
  <div>
    <table id="chessboard"></table>
  </div>
</body>

＆＃13;

Answer 2

向所有单元格添加click事件。

首先，您需要将原始颜色存储在某处，以便在再次点击时将其更改回正常状态。

为此，您可以使用data-*属性。现在，要将正确的white和black颜色分配给相应的单元格＆＃39; data-color属性，您可以使用此等效的JavaScript，

row.children[j].setAttribute('data-color', ((i % 2 != 0 && j % 2 == 0) || (i % 2 == 0 && j % 2 != 0)) ? 'black' : 'white')

这部分CSS，

tr:nth-child(odd) td:nth-child(even) {
  background: black
}
tr:nth-child(even) td:nth-child(odd) {
  background: black
}

现在，由于存储了原始颜色，您可以简单地提取存储在data-color属性中的相应颜色，并在其backgroundColor为red时将其更改回正常。

＆＃13;

var width = parseInt(prompt("Put width", "here"));
var height = parseInt(prompt("Put height", "here"));

function myFunction() {
  var table = document.getElementById("chessboard");
  for (var i = 0; i < height; i++) {
    var row = table.insertRow(i);
    for (var j = 0; j < width; j++) {
      row.insertCell(j);
      row.children[j].setAttribute('data-color', ((i % 2 != 0 && j % 2 == 0) || (i % 2 == 0 && j % 2 != 0)) ? 'black' : 'white')
      row.children[j].addEventListener('click', function() {
        this.style.backgroundColor = (this.style.backgroundColor == 'red') ? this.getAttribute('data-color') : this.style.backgroundColor = 'red';
      });
    }
  };
}

＆＃13;

#chessboard {
  border: 1px solid black;
  border-collapse: collapse
}
td {
  width: 40px;
  height: 40px
}
tr:nth-child(odd) td:nth-child(even) {
  background: black
}
tr:nth-child(even) td:nth-child(odd) {
  background: black
}

＆＃13;

<body onload="myFunction()">
  <div>
    <table id="chessboard"></table>
  </div>
</body>

＆＃13;

使用纯javascript更改表格中单元格的颜色

2 个答案: