Change table background colors in html using a database

Question

I'm using a database in order to paint table cells with an specific color depending on a variable. If it is 1 is grey, if it is 0 is green. However, I'd like to make it so the grey ones can't change color with a click, while making it so the green ones change color when clicked. the 1s and 0s in the database can change at anytime if the value is changed. I can't make it so you can change the green cells with a click while keeping the grey onces from being changed.

I use this portion to check the database and color as intended:

 $(document).ready(function(){
        $("#pedido").click(function(){
         var  tipo = "TraD";
        $.post("Controlador.php",{Tip:tipo}, function(datos){ 
        json = JSON.parse(datos);
         var Hor = json.Horario;

            var tick = [], tock;
        var hashes = Hor.split(',');
        for(var i = 0; i < hashes.length; i++){
            tock = hashes[i].split('=');
            tick.push(tock[0]);
            tick[tock[0]] = tock[1];
        }
         var Secuencia= "";
        for(var i=2; i <= 55 ; i++){
            if(tick[i]==1){
                document.getElementById("d"+(i-1)).style.backgroundColor ="rgb(119, 136, 155)";
                document.getElementById("d"+(i-1)).unbind('click');
            }

         }

As you can see, I was trying to disable the click option in the grey ones, but it isn't working at all. the table cells and how they change colors can be seen below:

        <td  style = "background-color: rgb(0, 250, 154); " onclick = "cambiar(this);"  id = "d1"></td>
                                    <td  style = "background-color: rgb(0, 250, 154); " onclick = "cambiar(this);"  id = "d2"></td>
                                    <td  style = "background-color: rgb(0, 250, 154); " onclick = "cambiar(this);"  id = "d3"></td>
                                    <td  style = "background-color: rgb(0, 250, 154); " onclick = "cambiar(this);"  id = "d4"></td>
                                    <td  style = "background-color: rgb(0, 250, 154); " onclick = "cambiar(this);" id = "d5"></td>
                                    <td  style = "background-color: rgb(0, 250, 154); " onclick = "cambiar(this);" id = "d6"></td>

If there is another way to solve this problem, I'm all ears. Thank you very much.

Edit: Alright, here is the function cambiar:

    function cambiar(celda){ 
       if( celda.style.backgroundColor == "rgb(0, 250, 154)"){

            celda.style.backgroundColor="rgb(119, 136, 155)";

        }else{

            celda.style.backgroundColor="rgb(0, 250, 154)"; //778899
        }

}

Answer 1

You may or may not be wondering why your code to remove the click handler didn't work. This is your code:

document.getElementById("d"+(i-1)).unbind('click');

This is wrong for two reasons. The first is that normal elements don't have an unbind function. You would need to wrap that with $(...) first.

However, jQuery cannot unbind events that were set in onclick attributes. See Unbinding inline onClick not working in jQuery? for more discussion.

One of the workarounds suggested there is to use removeAttr() to remove the onclick attribute. I believe this would work for you as well.

$('#d'+(i-1)).removeAttr('onclick');

---

Another fairly simple way to solve this is to check if the cell is grey within your cambiar() function:

function cambiar(celda){
    if (celda.style.backgroundColor == "rgb(119, 136, 155)"){
        return;
    }

    if( celda.style.backgroundColor == "rgb(0, 250, 154)"){

        celda.style.backgroundColor="rgb(119, 136, 155)";

    }else{

        celda.style.backgroundColor="rgb(0, 250, 154)"; //778899
    }
}

What this does is stop the function immediately if the cell is grey.

---

Script47 posted a comment suggesting using classes. This is a more elegant, more organized way of doing things, but it requires several changes.

The default state of the rows will be the unclickable grey. The ones that are clickable will be given the .clickable class, which colors the row green.

The CSS would look something like this:

/* Applied to the cells by default */
.celda {
  background-color: rgb(119, 136, 155);
}

.clickable {
  background-color: rgb(0, 250, 154);
}

When you generate the table, you would add a celda class to the cells in that column. Or, to avoid having to use celda all over, in your CSS you could use td:nth-child(x) where x is the number of the column (though you'd have to mess with CSS specificity to make .clickable show up correctly).

Whenever cells qualified to be clickable, they would be given the clickable class. Your HTML would look something like this:

  <td  class = "celda clickable"  id = "d1"></td>
  <td  class = "celda clickable"  id = "d2"></td>
  <td  class = "celda clickable"  id = "d3"></td>
  <td  class = "celda clickable"  id = "d4"></td>
  <td  class = "celda clickable"  id = "d5"></td>
  <td  class = "celda clickable"  id = "d6"></td>

All of this is leading up to this JavaScript, which you can do with jQuery:

$(document).on('click', '.clickable', function() {
  $(this).removeClass('clickable');
});

Here it is in action (without the rest of the table or your code to update things from the database):

$(document).on('click', '.clickable', function() {
  $(this).removeClass('clickable');
});

/* Applied to the cells by default */
.celda {
  background-color: rgb(119, 136, 155);
}

.clickable {
  background-color: rgb(0, 250, 154);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="celda clickable" id="d1">cell d1</td>
  </tr>
  <tr>
    <td class="celda clickable" id="d2">cell d2</td>
  </tr>
  <tr>
    <td class="celda clickable" id="d3">cell d3</td>
  </tr>
  <tr>
    <td class="celda clickable" id="d4">cell d4</td>
  </tr>
  <tr>
    <td class="celda clickable" id="d5">cell d5</td>
  </tr>
  <tr>
    <td class="celda clickable" id="d6">cell d6</td>
  </tr>
</table>