Question

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

<!doctype html>

<html>
<head>
<title>Table Tracker</title>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta charset="UTF-8">

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.5/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script>html5.addElements('latest_beacons')</script>
<![endif]-->

<style>
td.flash{
animation: pulse 1s infinite;
}

@-webkit-keyframes pulse {
from, to { box-shadow: 0 0 0 0 white;}
100% { box-shadow: 0 0 0 6px white inset; }
}
table {
padding: 10px 10px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
}

table, td, th {
border: 1px solid black;    
text-align: center; 
vertical-align: middle;
font-size: 40px;
background-color: #8F8F8F;
}
</style>

<script>

$(document).ready(function() {
for (var i = 0; i < 12; 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/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.coloured').css('background-color','#8F8F8F',{'border-color':'black', 'border-width':'thin' }).addClass('coloured');
}
});


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

        });
    });
}
var updateTableInterval = setInterval(updateTable, 5000);
});
</script>
</head>

 <body>
<table id='zoning'>
        <tbody></tbody>
</table>
 </body>

</html>

Date Table

Answer 1

好的，你想检查你的回复中是否有密钥：

试试这个：

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

            });
        });
    }

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

1 个答案: