我有一个包含黑色和白色单元格的表格，我想创建一个按钮来更改单元格的颜色。
我已经使用 for 循环完成了 jsfiddle.net
现在，我不想使用下面的功能。是否可以仅更改整个表的类属性来更改所有 td 标签的类？
function changeClors() {
var cells = document.getElementsByTagName('td');
for (var i = 0; i < cells.length; i++) {
cSwap(cells[i])
}
最佳答案
是的，您可能只需要一个用于 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 :
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 = '';
}
}td {
border: 1px solid black;
border-collapse: collapse;
padding: 28px;
}
.t {
background: white
}
.t2 {
background: black
}
.myTable td {
background: gray;
}<body>
<input type="button" value="Change colors" onclick="changeClors()">
<input type="button" value="Change table" onclick="toggleClass()">
</body>关于javascript - 如何通过仅更改父类来更改子类？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46590387/