链接来自通过 Ajax 拉入的 2 个不同 php 文件的结果

Question

我有 2 个提取不同查询结果的 php 文件（在下面添加）

有没有办法可以链接这些结果，例如 我在底部添加了 2 张图片，右侧的表格是在第一个查询（beacon.php）之后，左侧的表格是在调用 Del.php 之后

我还附上了示例数据图像我在数据周围添加了一个蓝色框，如果可能的话，我想链接，因为信标 24,89,95 存在于 Q1(beacon.php) 和 Q2(Del.php)更改这些单元格的边框并将其余单元格边框留为黑色有没有办法做到这一点？

Q1 = Beacon.php

$sql = 'SELECT 
* 
FROM
(SELECT
beacon,location,date,
COUNT(location) AS counter 
FROM `test`.`test`
WHERE `date` = CURDATE() and `time` > NOW() - interval 40 second
GROUP BY beacon) AS SubQueryTable
ORDER BY SubQueryTable.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);

Q2 = Del.php

$sql = "
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 ";

$result = $conn->query($sql);


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

echo json_encode($rows);

html/javascript端

<style>
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/beacon.php', function(response) {
console.log(response);
var row;
$.each(response, function(index, item) {
    console.log(item);
    $(`td.${item.beacon}`).css('background-color', item.location).toggleClass('coloured');
});
});


function updateTable() {
//console.log('function called');
$('td.coloured').css('background-color','#8F8F8F').toggleClass('coloured');
$.get('php/test.php', function(response) {
    $.each(response.query1, function(index, item) {
        console.log(item.beacon,item.location);
        //$('td.coloured').css('background-color','#8F8F8F').toggleClass('coloured');
$(`td.${item.beacon}`).css('background-color', item.location).toggleClass('coloured');
    });
});
}
var updateTableInterval = setInterval(updateTable, 5000);
});

$.get('php/del.php', function(response) {
console.log(response);
var row;
$.each(response, function(index, item) {
    console.log(item);
if (item.delivery_avg <= 7.00) {
return $(`td.${item.beacon}`).css({'border-color':'lime', 'border-width':'thick' }).toggleClass('coloured');
} else if (item.delivery_avg >= 7.01 && item.delivery_avg <= 14.00) {
 return $(`td.${item.beacon}`).css({'border-color':'orange', 'border-width':'thick'}).toggleClass('coloured');
} else if (item.delivery_avg >= 14.01 && item.delivery_avg <= 20.00) {
return $(`td.${item.beacon}`).css({'border-color':'pink', 'border-width':'thick' }).toggleClass('coloured');
} else if (item.delivery_avg >= 20.01) {
return $(`td.${item.beacon}`).css({'border-color': 'red', 'border-width':'thick' }).toggleClass('coloured');
}
});
});
</script>

Answer 1

我认为最好让 MySQL 链接数据。

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 40 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
ORDER BY beacon.counter DESC