Javascript 当没有收到来自mysql的数据时更改css

从下面的代码中我的总体目标是，当数据被拉入时，信标的值将与表中的数字相对应，位置将根据其值改变背景颜色，边框将根据delivery_avg值进行更改，然后当数据停止拉入时，单元格将返回灰色背景和黑色细边框（当前想法请参见下面的代码，并参见所附图片，例如数据和默认表格布局）

桌面跟踪器
快闪{
动画：脉冲1s无限；
}
@-webkit关键帧脉冲{
从，到{框阴影：0白色；}
100%{框阴影：0 6px白色插图；}
}
桌子{
填充：10px 10px；
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
}
表，td，th{
边框：1px纯黑；
文本对齐：居中；
垂直对齐：中间对齐；
字体大小：40px；
背景色：#8F8F；
}
$（文档）.ready（函数（）{
对于（变量i=0；i<12；i++）{
变量行=$（''）。附加到（“#分区主体”）；
对于（var j=1；j<11；j++）{
$（`${i*10+j}`）。追加到（行）；
}
}
$.get（'php/test2.php'，函数（响应）{
控制台日志（响应）；
//检查密钥是否在数组中
如果（响应中的“位置”）{
$。每个（响应、功能（索引、项目）{
$（`td.${item.beacon}`）.css（'background-color'，item.location.）.addClass（'colored'）；
});
}否则{
console.log（“找不到密钥”）；
//当不存在值时，在此处更改css
//重要提示：我在这里放置的是一个示例，可能不起作用
$（'td.colored'）.css（'background-color'，'#8F8F8F'，{'border-color'：'black'，'border-width'：'thin'））.addClass（'colored'）；
}
});
函数updateTable（）{
//log（'function called'）；
$（'td.colored'）.css（'background-color'，'#8F8F8F'，{'border-color'：'black'，'border-width'：'thin'}）；
$.get（'php/test2.php'，函数（响应）{
$。每个（响应、功能（索引、项目）{
控制台日志（项目信标）；
如果（项目位置）{
$（`td.${item.beacon}`）.css（'background-color'，item.location.）.toggleClass（'colored'）；
如果（item.delivery\u avg=4.01和&item.delivery\u avg=7.01和&item.delivery\u avg=10.01）{
返回$（'td.colored'）.css（{'border-color'：'red'，'border-width'：'thick'}）；
}                
}
});
});
}
var updateTableInterval=setInterval（updateTable，5000）；
});

---

好的，您想检查您的回答中是否有密钥：

试试这个：

$.get('php/test2.php', function(response) {
    console.log(response);
    //checks if key is in array
    if("location" in response){
      $.each(response, function(index, item) {
        $(`td.${item.beacon}`).css('background-color', item.location).addClass('coloured');
      });
    }else{
      console.log("key not found");
      //change your css here when no value exists
      //IMPORTANT Note what I have placed here is an example and might not work
      $(`td.${item.beacon}`).css('background-color','#8F8F8F',{'border-color':'black', 'border-width':'thin' });
    }
});

在

updateTable

函数中，您需要再次测试密钥。您有两个位置可以使用

$.get（'php/test2.php'，function（response）{

，因此它再次崩溃。我在该区域放置了一个if语句，以检查item.location是否存在。我不确定您为什么要使用它两次。不过，我希望这个小小的更改可以解决问题

    function updateTable() {
        //console.log('function called');
        $('td.coloured').css('background-color':'#8F8F8F',{'border-color':'black', 'border-width':'thin' }).toggleClass('coloured');
        $.get('php/test2.php', function(response) {
            $.each(response, function(index, item) {
                console.log(item.beacon);
                if(item.location){
                    $(`td.${item.beacon}`).css('background-color', item.location).toggleClass('coloured');
                  if (item.delivery_avg <= 4.00) {
                   return $('td.coloured').css({'border-color':'lime', 'border-width':'thick' }).toggleClass('coloured');
                  } else if (item.delivery_avg >= 4.01 && item.delivery_avg <= 7.00) {
                   return $('td.coloured').css({'border-color':'orange', 'border-width':'thick' }).toggleClass('coloured');
                  } else if (item.delivery_avg >= 7.01 && item.delivery_avg <= 10.00) {
                   return $('td.coloured').css({'border-color':'pink', 'border-width':'thick' }).toggleClass('coloured');
                  } else if (item.delivery_avg >= 10.01) {
                   return $('td.coloured').css({'border-color':'red', 'border-width':'thick' }).toggleClass('coloured');
                  }                
                }else{
                  $(`td.${item.beacon}`).css('background-color','#8F8F8F',{'border-color':'black', 'border-width':'thin' });
                }

            });
        });
    }

函数updateTable（）{
//log（'function called'）；
$（'td.colored'）.css（'background-color'：'8F8F8F'，{'border-color'：'black'，'border-width'：'thin'}）；
$.get（'php/test2.php'，函数（响应）{
$。每个（响应、功能（索引、项目）{
控制台日志（项目信标）；
如果（项目位置）{
$（`td.${item.beacon}`）.css（'background-color'，item.location.）.toggleClass（'colored'）；
如果（item.delivery\u avg=4.01和&item.delivery\u avg=7.01和&item.delivery\u avg=10.01）{
返回$（'td.colored'）.css（{'border-color'：'red'，'border-width'：'thick'}）；
}                
}否则{
$（`td.${item.beacon}`）.css（'background-color'，'#8F8F8F'，{'border-color'：'black'，'border-width'：'thin'}）；
}
});
});
}

如果

$.get（）

中没有值，控制台.log（响应）会输出什么？我添加了一个控制台的图像，当数据被拉入时，当不再有数据被拉入时，控制台中不会显示任何内容。当您获得数组

{beacon..}

没有定义任何内容？还是位置不存在？只是尝试分别使用`css（）`和

addClass（）

函数。不要在同一行中使用它们

    function updateTable() {
        //console.log('function called');
        $('td.coloured').css('background-color':'#8F8F8F',{'border-color':'black', 'border-width':'thin' }).toggleClass('coloured');
        $.get('php/test2.php', function(response) {
            $.each(response, function(index, item) {
                console.log(item.beacon);
                if(item.location){
                    $(`td.${item.beacon}`).css('background-color', item.location).toggleClass('coloured');
                  if (item.delivery_avg <= 4.00) {
                   return $('td.coloured').css({'border-color':'lime', 'border-width':'thick' }).toggleClass('coloured');
                  } else if (item.delivery_avg >= 4.01 && item.delivery_avg <= 7.00) {
                   return $('td.coloured').css({'border-color':'orange', 'border-width':'thick' }).toggleClass('coloured');
                  } else if (item.delivery_avg >= 7.01 && item.delivery_avg <= 10.00) {
                   return $('td.coloured').css({'border-color':'pink', 'border-width':'thick' }).toggleClass('coloured');
                  } else if (item.delivery_avg >= 10.01) {
                   return $('td.coloured').css({'border-color':'red', 'border-width':'thick' }).toggleClass('coloured');
                  }                
                }else{
                  $(`td.${item.beacon}`).css('background-color','#8F8F8F',{'border-color':'black', 'border-width':'thin' });
                }

            });
        });
    }