Question

我有一张黑白格子的桌子，我想创建一个改变细胞颜色的按钮。

我是通过使用for循环jsfiddle.net

完成的

现在，我不想使用下面的功能。是否可以仅更改整个表的类属性以更改所有 td 标记的类？

function changeClors() {
var cells = document.getElementsByTagName('td');
for (var i = 0; i < cells.length; i++) {
    cSwap(cells[i])
}

Answer 1

是的，您只需要table的css类来执行此操作，并且可以使用您的表来切换此类。

这是你的css应该如何定义：

.myTable td{
  background: gray;
}

这是在表格中切换它的JS函数：

function toggleClass(){
    var table = document.querySelector("table");
    if(table.className !== "myTable"){
                table.className = "myTable";
    }else{
            table.className = '';
    }
}

<强>演示：

这是updated Demo：

＆＃13;

function cSwap(cell) {
  if (cell.className == "t")
    cell.className = "t2";
  else if (cell.className == "t2")
    cell.className = "t";
}

function tableCreate(n) {
  var body = document.getElementsByTagName('body')[0];
  var tbl = document.createElement('table');
  tbl.setAttribute('onclick', 'cSwap(event.target)');
  for (var i = 0; i < n; i++) {
    var tr = document.createElement('tr');
    for (var j = 0; j < n; j++) {
      var td = document.createElement('td');
      tr.appendChild(td)
      td.classList.add('t');
    }
    tbl.appendChild(tr);
  }
  body.appendChild(tbl);
}

function changeClors() {
  var cells = document.getElementsByTagName('td');
  for (var i = 0; i < cells.length; i++) {
    cSwap(cells[i])
  }
}
tableCreate(5);

function toggleClass() {
  var table = document.querySelector("table");
  if (table.className !== "myTable") {
    table.className = "myTable";
  } else {
    table.className = '';
  }
}

＆＃13;

td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 28px;
}

.t {
  background: white
}

.t2 {
  background: black
}

.myTable td {
  background: gray;
}

＆＃13;

<body>
  <input type="button" value="Change colors" onclick="changeClors()">
  <input type="button" value="Change table" onclick="toggleClass()">
</body>

＆＃13;

Answer 2

如果您只想更改单元格的颜色，可以切换table的类，然后在单元格上使用CSS选择器，如下所示：

.table-dark td { background-color: #000; }
.table-light td { background-color: #fff; }

Answer 3

尝试在table元素上切换function cSwap(cell) { if (cell.className == "t") cell.className = "t2"; else if (cell.className == "t2") cell.className = "t"; } function tableCreate(n) { var body = document.getElementsByTagName('body')[0]; var tbl = document.createElement('table'); tbl.setAttribute('onclick', 'cSwap(event.target)'); tbl.setAttribute('id', 'myTable'); for (var i = 0; i < n; i++) { var tr = document.createElement('tr'); for (var j = 0; j < n; j++) { var td = document.createElement('td'); tr.appendChild(td) td.classList.add('t'); } tbl.appendChild(tr); } body.appendChild(tbl); } function changeClors() { var table = document.getElementById('myTable'); table.classList.toggle('invert') } tableCreate(5);类名，而不是使用for循环。然后相应地调整css，如下面的代码段所示：

td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 28px;
}

.t {
  background: white
}

.t2 {
  background: black
}

.invert .t {
  background: black
}

.invert .t2 {
  background: white
}

<body>
  <input type="button" value="Change colors" onclick="changeClors()">
</body>

{{1}}

如何通过仅更改父类来更改子类？

3 个答案: