How to change child classes by changing only the parent class?

user_8726927 0
Viewed 277

I have a table with black and white cells and I want to create a button which changes the colors of cells.

I have done it by using for loop jsfiddle.net

Now, I dont want to use the function below. Is it possible to change only the class atribute of whole table to change class of all td tag's?

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

Yes it's possible you just need a css class for the table to do it and a function to toggle this class with your table.

This is how should be your css defined:

.myTable td{
  background: gray;
}

And this is the JS function to toggle it in the table:

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

Demo:

This is an 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>

user_36696240

If you're looking to just change the colors of the cells, you could toggle the class of the table and then use CSS selectors on the cells like the following:

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

Instead of using the for loop, try toggling the invert class name on the table element. Then adjust the css accordingly, as in the snippet below:

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);
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>

user_33139220
Related