如何关联通过Ajax获取的两个PHP文件的查询结果？

当然可以实现这个关联效果！我来给你拆解几个实操性强的方案，帮你搞定两边表格的beacon编号关联和样式高亮。

核心思路 #

不管用哪种方案，核心都是先获取两个接口的数据集，找出同时存在的beacon编号，再给对应单元格添加特殊样式/交互。下面是两种常用的实现方式：

方案一：前端处理（无需修改后端接口） #

如果你的后端接口暂时不能调整，这个方案最适合。我们会在前端请求两个接口的数据，找出共同的beacon编号，然后渲染表格时给对应单元格加样式，还能实现鼠标悬停联动高亮。

步骤1：定义CSS样式 #

先写好关联单元格的样式，比如蓝色粗边框，以及悬停后的高亮效果：

/* 关联单元格的基础样式 */
.highlight-linked {
  border: 2px solid #007bff !important; /* 蓝色粗边框，用!important覆盖表格默认样式 */
  position: relative;
}

/* 鼠标悬停时的联动高亮 */
.highlight-linked:hover,
.highlight-linked.active {
  background-color: rgba(0, 123, 255, 0.1); /* 淡蓝色背景 */
  border-color: #0056b3 !important; /* 加深边框颜色 */
}

步骤2：前端JS逻辑（原生JS示例） #

我们用fetch请求数据，找出共同编号，渲染表格并绑定交互：

// 封装请求数据的异步函数
async function fetchTableData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('请求失败');
    return await response.json();
  } catch (err) {
    console.error(err);
    return [];
  }
}

// 主渲染逻辑
async function renderLinkedTables() {
  // 1. 获取两个接口的数据
  const beaconData = await fetchTableData('beacon.php');
  const delData = await fetchTableData('Del.php');

  // 2. 提取所有beacon编号，找出交集
  const beaconIds = new Set(beaconData.map(item => item.beacon_id));
  const delIds = new Set(delData.map(item => item.beacon_id));
  const commonBeaconIds = new Set([...beaconIds].filter(id => delIds.has(id)));

  // 3. 渲染右侧beacon表格（对应beacon.php结果）
  const beaconTableBody = document.querySelector('#beacon-table tbody');
  beaconData.forEach(item => {
    const row = document.createElement('tr');
    // 渲染beacon编号单元格
    const idCell = document.createElement('td');
    idCell.textContent = item.beacon_id;
    // 如果是共同编号，添加样式和标记属性
    if (commonBeaconIds.has(item.beacon_id)) {
      idCell.classList.add('highlight-linked');
      idCell.setAttribute('data-beacon-id', item.beacon_id);
    }
    // 渲染其他字段的单元格（根据你的实际数据调整）
    const otherCell = document.createElement('td');
    otherCell.textContent = item.other_field;
    // 把单元格添加到行，行添加到表格
    row.appendChild(idCell);
    row.appendChild(otherCell);
    beaconTableBody.appendChild(row);
  });

  // 4. 渲染左侧Del表格（对应Del.php结果）
  const delTableBody = document.querySelector('#del-table tbody');
  delData.forEach(item => {
    const row = document.createElement('tr');
    const idCell = document.createElement('td');
    idCell.textContent = item.beacon_id;
    if (commonBeaconIds.has(item.beacon_id)) {
      idCell.classList.add('highlight-linked');
      idCell.setAttribute('data-beacon-id', item.beacon_id);
    }
    // 其他字段渲染
    const otherCell = document.createElement('td');
    otherCell.textContent = item.another_field;
    row.appendChild(idCell);
    row.appendChild(otherCell);
    delTableBody.appendChild(row);
  });

  // 5. 添加鼠标悬停联动效果
  document.querySelectorAll('.highlight-linked').forEach(cell => {
    cell.addEventListener('mouseenter', () => {
      const targetId = cell.getAttribute('data-beacon-id');
      // 给所有同编号的单元格加active类
      document.querySelectorAll(`[data-beacon-id="${targetId}"]`).forEach(el => {
        el.classList.add('active');
      });
    });
    cell.addEventListener('mouseleave', () => {
      const targetId = cell.getAttribute('data-beacon-id');
      document.querySelectorAll(`[data-beacon-id="${targetId}"]`).forEach(el => {
        el.classList.remove('active');
      });
    });
  });
}

// 页面加载完成后执行渲染
window.addEventListener('DOMContentLoaded', renderLinkedTables);

方案二：后端预处理（减少前端计算量） #

如果可以修改后端代码，建议用这个方案——后端直接标记出共同的beacon编号，前端只需要根据标记渲染样式，逻辑更简洁高效。

步骤1：修改PHP接口（以beacon.php为例） #

在beacon.php中，先查询Del表的beacon编号，给当前数据添加is_linked标记：

<?php
// 数据库连接（根据你的实际配置调整）
$dsn = 'mysql:host=localhost;dbname=your_database;charset=utf8';
$username = 'your_user';
$password = 'your_pass';
$pdo = new PDO($dsn, $username, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 查询beacon主数据
$beaconQuery = $pdo->query("SELECT beacon_id, other_field FROM beacon_table");
$beaconData = $beaconQuery->fetchAll(PDO::FETCH_ASSOC);

// 查询Del表中所有存在的beacon编号
$delQuery = $pdo->query("SELECT DISTINCT beacon_id FROM del_table");
$linkedIds = $delQuery->fetchAll(PDO::FETCH_COLUMN, 0);
// 转成关联数组，提高查询效率
$linkedIdMap = array_flip($linkedIds);

// 给每条beacon数据添加是否关联的标记
foreach ($beaconData as &$item) {
  $item['is_linked'] = isset($linkedIdMap[$item['beacon_id']]);
}

// 返回JSON格式数据
header('Content-Type: application/json');
echo json_encode($beaconData);
?>

同样的逻辑，你可以修改Del.php，也给它返回的每条数据添加is_linked标记。

步骤2：前端简化渲染 #

前端请求数据后，直接根据is_linked字段判断是否添加样式，不需要再处理交集：

async function renderTables() {
  const beaconData = await fetchTableData('beacon.php');
  const delData = await fetchTableData('Del.php');

  // 渲染beacon表格
  const beaconTableBody = document.querySelector('#beacon-table tbody');
  beaconData.forEach(item => {
    const row = document.createElement('tr');
    const idCell = document.createElement('td');
    idCell.textContent = item.beacon_id;
    if (item.is_linked) {
      idCell.classList.add('highlight-linked');
      idCell.setAttribute('data-beacon-id', item.beacon_id);
    }
    // 其他单元格渲染...
    beaconTableBody.appendChild(row);
  });

  // 渲染Del表格同理...

  // 鼠标联动逻辑和方案一相同
}

注意事项 #

1. 确保你的PHP接口返回结构化的JSON数据（比如每个元素是包含beacon_id的对象），如果现在返回的是HTML表格，那需要先改成返回JSON，不然前端处理会很麻烦。
2. 如果表格数据量很大，方案二的后端预处理会更高效，避免前端处理大量数据导致卡顿。
3. 样式可以根据你的需求调整，比如边框颜色、粗细，或者添加其他视觉效果。

内容的提问来源于stack exchange，提问作者Avalon Parkes-Barton