CODEWITHSUNDEEP
javascripthtmlcss
mihcc
mihcc

Reputation: 45

changing color of a cell in table using pure javascript

I have a table created with javascript. I would like to change color of a cell to red, when you click on it. I know i should propably use onClick event. But I am not sure how to use it in this specific task.

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);
    }
  };
}
#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
}
<body onload="myFunction()">
  <div>
    <table id="chessboard"></table>
  </div>
</body>

Upvotes: 1

Views: 2122

Answers (2)

Weafs.py
Weafs.py

Reputation: 22992

Add a click event to all cells.

First, you'll need to store the original color somewhere so that you can change it back to normal when clicked again.

To do that, you could make use of data-* attribute. Now, to assign the correct white and black colors to corresponding cells' data-color attributes, you could use this JavaScript equivalent,

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

for this part of CSS,

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

Now, since the original colors are stored, you could simply extract the corresponding colors stored in the data-color attribute and change it back to normal if its backgroundColor is red.

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';
      });
    }
  };
}
#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
}
<body onload="myFunction()">
  <div>
    <table id="chessboard"></table>
  </div>
</body>

Upvotes: 1

Rhumborl
Rhumborl

Reputation: 16609

You can add an onclick listener to each cell which add a selected class to it. You also just need to track what was selected previously so you can remove the selected class from it:

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);
    }
  };
}
#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;
}
<body onload="myFunction()">
  <div>
    <table id="chessboard"></table>
  </div>
</body>

Upvotes: 2

Related Questions