时间戳

首页 > 解决方案 > 使用数据库更改 html 中的表格背景颜色

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

问题描述

我正在使用数据库来根据变量绘制具有特定颜色的表格单元格。如果是 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
        }

}

标签： javascriptphphtmlsqldatabase

解决方案

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

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发表了一条建议使用类的评论。这是一种更优雅、更有条理的做事方式，但它需要进行一些更改。

行的默认状态将是不可点击的灰色。那些可点击的将被​​赋予.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)wherex是列的编号（尽管您必须弄乱 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>

推荐阅读