PHP页面点击Select按钮仅显示ID，需加载对应MySQL滑雪度假村详情表格

我正在把MySQL数据库的数据拉取到单个PHP页面，每行配置一个Select按钮，点击按钮显示详情区域，点击Close按钮返回全记录列表。目前点击Select按钮只能获取对应行的sira_no（序号），详情区域仅显示该ID，无法展示该序号对应的所有数据库记录。

需求：数据库中同一滑雪度假村（Kayak Merkezi）有多条票务相关记录（比如1次/5次使用票的成人/儿童票价），需要在详情区域以表格形式展示该滑雪度假村的所有相关记录，可通过sira_no或度假村名称筛选。

列表表格与PHP查询逻辑 #

<table id="usertab" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Sıra No</th>
            <th>Bulunduğu İl</th>
            <th>Kayak Merkezi</th>
        </tr>
    </thead>    
    <tbody class="usertab">
            <?php 
            $sec="SELECT DISTINCT(merkez),il,sira_no FROM skipass ORDER BY sira_no";
            $sonuc=$conn->query($sec);
            
            if($sonuc->num_rows>0){
                while($cek=$sonuc->fetch_assoc())
                {
                    echo "
                        <tr>
                            <td>".$cek['sira_no']."</td>
                            <td>".$cek['il']."</td>
                            <td>".$cek['merkez']."</td>
                            <td><div class='select' id=".$cek['sira_no']." onclick='callup_arrays(this.id)'>Select</div></td>
                        </tr>
                        ";
                }
            
            }else{
            
            echo "Veritabanında Kayıt Bulunamadı";
            }
                ?>
        </tbody>
    <tfoot>
        <tr>
            <th>Sıra No</th>
            <th>Bulunduğu İl</th>
            <th>Kayak Merkezi</th>
        </tr>
    </tfoot>
</table>

详情区域与JS交互逻辑 #

<div class="details">
  <button id="close">Close</button>
  <br>
  <br>
    
  <h2>Kayak Merkezi Sıra No</h2>
  <p id="user"></p>
</div>

<script>
const details = document.querySelector(".details");
const usertab = document.querySelector("#usertab");
const user = document.querySelector("#user");
const close = document.querySelector("#close");

close.addEventListener("click", function () {
  usertab.style.display = "table";
  details.style.display = "none";
});
function callup_arrays(clicked_id) {
  usertab.style.display = "none";
  user.innerHTML = clicked_id;
 
  details.style.display = "block";
}
</script>

1. 新增PHP接口获取度假村详情数据 #

在页面中添加AJAX请求处理逻辑，根据sira_no查询对应度假村的所有票务记录（用预处理语句防止SQL注入）：

<?php
// 处理AJAX详情请求
if(isset($_POST['get_details'])){
    $sira_no = $_POST['sira_no'];
    $stmt = $conn->prepare("SELECT * FROM skipass WHERE sira_no = ?");
    $stmt->bind_param("i", $sira_no);
    $stmt->execute();
    $result = $stmt->get_result();
    $data = [];
    while($row = $result->fetch_assoc()){
        $data[] = $row;
    }
    echo json_encode($data);
    exit;
}
?>

2. 修改JS逻辑，通过AJAX获取并渲染详情表格 #

更新callup_arrays函数，发送请求获取数据后动态生成表格：

const details = document.querySelector(".details");
const usertab = document.querySelector("#usertab");
const user = document.querySelector("#user");
const close = document.querySelector("#close");
// 新增表格容器
const detailsTable = document.createElement('div');
details.appendChild(detailsTable);

close.addEventListener("click", function () {
  usertab.style.display = "table";
  details.style.display = "none";
  detailsTable.innerHTML = ''; // 清空表格
});

function callup_arrays(clicked_id) {
  usertab.style.display = "none";
  user.innerHTML = clicked_id;
  details.style.display = "block";

  // 发送AJAX请求
  fetch(window.location.href, {
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    body: `get_details=1&sira_no=${clicked_id}`
  })
  .then(res => res.json())
  .then(data => {
    if(data.length > 0){
      // 生成表格
      let tableHtml = '<table class="table table-striped table-bordered" width="100%">';
      // 生成表头
      tableHtml += '<thead><tr>';
      Object.keys(data[0]).forEach(key => tableHtml += `<th>${key}</th>`);
      tableHtml += '</tr></thead><tbody>';
      // 生成表体
      data.forEach(row => {
        tableHtml += '<tr>';
        Object.values(row).forEach(val => tableHtml += `<td>${val}</td>`);
        tableHtml += '</tr>';
      });
      tableHtml += '</tbody></table>';
      detailsTable.innerHTML = tableHtml;
    } else {
      detailsTable.innerHTML = '<p>该度假村暂无票务记录</p>';
    }
  })
  .catch(err => {
    console.error(err);
    detailsTable.innerHTML = '<p>加载数据失败，请重试</p>';
  });
}

3. 调整详情区域HTML结构 #

优化详情区域的显示，把序号整合到标题中：

<div class="details">
  <button id="close">Close</button>
  <br>
  <br>
    
  <h2>Kayak Merkezi Sıra No: <span id="user"></span></h2>
  <!-- 动态表格将渲染到这里 -->
</div>

4. 优化列表查询逻辑（可选） #

原查询用DISTINCT(merkez)可能导致同一sira_no重复出现，改用分组查询确保每行对应唯一度假村：

<?php
$sec = "SELECT sira_no, il, merkez FROM skipass GROUP BY sira_no, il, merkez ORDER BY sira_no";
$sonuc = $conn->query($sec);

if($sonuc->num_rows > 0){
    while($cek = $sonuc->fetch_assoc()){
        echo "
            <tr>
                <td>{$cek['sira_no']}</td>
                <td>{$cek['il']}</td>
                <td>{$cek['merkez']}</td>
                <td><div class='select' id='{$cek['sira_no']}' onclick='callup_arrays(this.id)'>Select</div></td>
            </tr>
        ";
    }
}else{
    echo "Veritabanında Kayıt Bulunamadı";
}
?>

内容的提问来源于stack exchange，提问作者Xiaomi Note10