Change the CSS of the last div in a column

Question

I have a table of 6 rows and 7 columns. Each cell is initially a gray circle. When I click on a circle I need to change the background color of the last non-blue circle from the same column starting from the bottom row to blue.

This code works only when the circles on the last row are grey. It would not change the color of the circle on the second to last row if the circle on the last row is blue. Any help or tips are welcome!

$(".circle").click(function() {
  var colindex = $(this).closest('td').index() + 1;

  for (i = 6; i > 0; i--) {
    var cell = $('tr:nth-child(' + i + ') td:nth-child(' + colindex + ')');
    if (cell.find('div').css('background-color') === 'blue') {
      i--;
    } else {
      cell.find('div').css('background-color', 'blue');
      break;
    }
  }
})

table {
  margin: auto;
  width: 50% !important;
}

.circle {
  width: 100px;
  height: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  background: #706e6e;
  border: 4px solid black;
}

user_519413 · Answer

To achieve your goal you can get the index of the td which contains the clicked .circle. From there you can retrieve all .circle elements in the column. If you then use a class to set the style on the relevant circles, .blue in the example below, you can retrieve the last available circle and add the class to it. Something like this:

$(".circle").click(function() {
  let $circle = $(this);
  let colIndex = $circle.closest('td').index();
  $circle.closest('table')
    .find('tr td:nth-child(' + (colIndex + 1) + ') .circle:not(.blue):last')
    .addClass('blue');
})

table {
  margin: auto;
}

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #706e6e;
  border: 4px solid black;
}

.circle.blue {
  background-color: blue;
}

Note that I only made the circles smaller in this example so that they fit in to the snippet better.

user_10985142 · Answer

It looks like .css('background-color') cannot be the same as the color name, but it must be the same value as the RGB. So the uquivalent to blue is rgb(0, 0, 255). Also if it recognizes the last element as blue , it will not have to iterate i--, because at the next cycle it will iterate again minus 1, adding it to the previous one, iterate minus 2.

Your for loop code should be like this:

for (i=6;i>=0;i--){

    var cell = $('tr:nth-child('+i+') td:nth-child('+colindex+')');

    if(cell.find('div').css('background-color')!=='rgb(0, 0, 255)'){

        cell.find('div').css('background-color','blue');
        break;

    }
}

Change the CSS of the last div in a column

2 Answers