如何根据它来定义变量并更改css?

时间:2018-04-16 08:12:21

标签: javascript php jquery html css

我试图根据mysql查询结果重置css,我可以使用IF {} else {}语句在某种程度上使其工作。

我正在尝试找到一种方法来定义响应中的数字,其中数字可以是1-120之间的任何位置,如果它存在于响应更改单元格中,如果它存在于响应更改单元格中,则存在该数字类。

e.g。

Json_encode =   
[{"beacon":"84","location":"YELLOW","date":"2018-04-16","counter":"6","delivery_avg":"00.14"}]

response =
0: {beacon: "68", location: "YELLOW", date: "2018-04-16", counter: "2", delivery_avg: "00.01"}length: 1__proto__: Array(0)

但是如上所述的信标是1-120之间的任何信号,因此我的示例代码将是

function(changetable)
if (response.contains (number))
return $('td.(item.beacon)').css({'background-color: 'colorof location', border-color: red}
else if (response doesn't contain number)
    return $('td.(item.beacon)').css({'background-color: 'grey', border-color: black}

e.g。

{beacon: "68", location: "YELLOW", date: "2018-04-16", counter: "2", delivery_avg: "00.01"}
{beacon: "50", location: "YELLOW", date: "2018-04-16", counter: "2", delivery_avg: "00.01"}
{beacon: "30", location: "YELLOW", date: "2018-04-16", counter: "2", delivery_avg: "00.01"}

将细胞68/50/30背景颜色变为黄色

{beacon: "50", location: "YELLOW", date: "2018-04-16", counter: "2", delivery_avg: "00.01"}
{beacon: "30", location: "YELLOW", date: "2018-04-16", counter: "2", delivery_avg: "00.01"}

68不再显示响应更改背景颜色灰色

第一位我似乎可以做得很好我的问题是将颜色改回灰色背景而边界由于没有响应参考的数字而变成黑色?

function updateTable() {
    $('td.coloured').css({'background-color':'#8F8F8F','border-color':'black','border-width':'thin'}).toggleClass('coloured');
    $.get('php/test2.php', function(response) {
  console.log(response, );
    $.each(response, function(index, item) {
      $(`td.${item.beacon}`).css({'background-color':item.location,'border-color':'black','border-width':'thin'}).addClass('coloured');
         $(`td.${item.beacon}`).css({'background-color':item.location,'border-color':'black','border-width':'thin'}).addClass('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').css({'background-color':'#8F8F8F','border-color':'black','border-width':'thin'}).addClass('def');

    }
    });

   });
 }
 var updateTableInterval = setInterval(updateTable, 1000);
});

PHP

$sql = "SELECT
beacon.beacon,
beacon.location,
beacon.date,
beacon.counter,
del.delivery_avg
FROM
(
SELECT
    beacon,
    location,
    date,
    COUNT(location) AS counter
FROM `test`.`test`
WHERE `date` = CURDATE()
AND `time` > ( NOW() - INTERVAL 10 SECOND )
GROUP BY beacon
) beacon
JOIN
(
SELECT
    beacon,
    TIME_FORMAT(TIMEDIFF(MAX(`time`), MIN(`time`)), '%i.%s') AS delivery_avg
FROM `test`.`test`
WHERE date = CURDATE()
AND time > ( NOW() - INTERVAL 30 MINUTE )
GROUP BY beacon
) 
del ON beacon.beacon = del.beacon
GROUP BY beacon.counter DESC";
$result = $conn->query($sql);


$result = mysqli_query($conn ,  $sql);
$rows = array();
while($r = mysqli_fetch_assoc($result)) {
  $rows[] = $r;
}

echo json_encode($rows);

0 个答案:

没有答案