使用数据库更改 html 中的表格背景颜色

Question

我正在使用数据库来根据变量用特定颜色绘制表格单元格。如果是 1 是灰色，如果是 0 是绿色。但是，我想让灰色的不能通过点击改变颜色，同时让绿色的在点击时改变颜色。如果值改变，数据库中的 1 和 0 可以随时改变。我做不到，所以您可以通过单击更改绿色单元格，同时防止更改灰色单元格。

我使用这部分按预期检查数据库和颜色：

 $(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');
            }

         }

如您所见，我试图禁用灰色选项中的点击选项，但它根本不起作用。表格单元格以及它们如何改变颜色如下所示：

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

如果有其他方法可以解决这个问题，我会全力以赴。非常感谢。

编辑：好的，这里是函数 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

您可能想知道，也可能不知道为什么您删除点击处理程序的代码不起作用。这是你的代码：

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

这是错误的，有两个原因。首先是普通元素没有unbind 函数。你需要先用$(...) 包装它。

然而，jQuery 不能解除在onclick 属性中设置的事件的绑定。更多讨论请见Unbinding inline onClick not working in jQuery?。

建议的解决方法之一是使用removeAttr() 删除onclick 属性。我相信这也对你有用。

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

---

解决此问题的另一种相当简单的方法是检查cambiar() 函数中的单元格是否为灰色：

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
    }
}

如果单元格是灰色的，它的作用是立即停止函数。

---

Script47 发布了 comment 建议使用类。这是一种更优雅、更有条理的做事方式，但需要进行一些更改。

行的默认状态是不可点击的灰色。可点击的将被​​赋予.clickable 类，将行着色为绿色。

CSS 看起来像这样：

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

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

当您生成表格时，您将向该列中的单元格添加一个celda 类。或者，为了避免必须全部使用celda，您可以在CSS 中使用td:nth-child(x)，其中x 是列号（尽管您必须弄乱CSS 特异性才能使.clickable 出现正确）。

只要单元格符合可点击条件，它们就会被赋予clickable 类。您的 HTML 将如下所示：

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

所有这一切都导致了这个 JavaScript，你可以用 jQuery 来做：

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

它正在运行（没有表格的其余部分或您的代码来更新数据库中的内容）：

$(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>