Question

我有一个html表格，其中的单元格颜色会根据使用php从mysql中提取的数据进行更改而且桌面上的颜色更新而不必刷新页面但是我当前遇到的问题是单元格从灰色开始但是当该值已经停止被拉入html，单元格没有回到灰色任何帮助我如何做到这一点？

抱歉，我应该包含css

目前的代码如下：

的CSS：

table, td, th {
border: 1px solid black;
cellpadding: 2;
cellspacing: 2;
width: "100%";
height: "100%";
text-align: center; 
vertical-align: middle;
font-size: 48px;
background-color: #8F8F8F;
}

HTML：

$(document).ready(function() {
    for (var i = 0; i < 10; i++) {
        var row = $('<tr>').appendTo("#zoning tbody");
        for (var j = 1; j < 11; j++) {
            $(`<td class='${i * 10 + j}'>${i * 10 + j}</td>`).appendTo(row);
        }
    }

    $.get('php/beacon.php', function(response) {
        console.log(response);
        var row;
        response.forEach(function(item, index) {
            console.log(item);
            $(`td.${item.beacon}`).css('background-color', item.location);
        });
    });

    function upateTable() {
        $.get('php/beacon.php', function(response) {
            response.forEach(function(item, index) {
                console.log(item);
                $(`td.${item.beacon}`).css('background-color', 
item.location);
            });
        });
    }
    var updateTableInterval = setInterval(upateTable, 15000);
});

Answer 1

也许有一个灰色背景的默认类，然后创建一个重置函数，在你得到PHP查询的答案之前将所有单元格恢复为这个默认颜色？

Answer 2

您的代码中没有任何地方将颜色设置为灰色。最好的办法是在updateTable（）函数中包含代码。

您可以使用jquery过滤器拉出所有非灰色单元格，并在重新着色之前将它们变为灰色，然后再根据您的ajax进行重新着色。

z-index

或者使用我建议的课程：

在您设置背景颜色的行中，还要设置一个用于标记彩色单元格的类

$('td').filter(function() {
     return $(this).css('background-color') != '#8F8F8F';
}).css('background-color','#8F8F8F');

然后您可以简单地取消所有标记的单元格

$(`td.${item.beacon}`).css('background-color', item.location).toggleClass('coloured');

将html单元格颜色自动更改为默认值

2 个答案: