如何将SQLSRV查询结果每行动态分配给可点击的<td>元素

问题根源 #

你遇到的问题核心是HTML的id属性必须唯一，但你循环生成的所有<td>都使用了同一个id="matchuptable"，所以document.getElementById()只能获取到页面中第一个带有该id的元素，导致只有第一个点击有效。

修改后的代码实现 #

1. PHP生成表格部分

把重复的id改为class（可选），同时在onclick中把当前点击的<td>元素传递给函数：

<table>
  <tbody>
    <tr>                
      <?php 
        while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {
      ?>
        <td class='matchuptable' onclick="game_ids(this)">
            <?php echo htmlspecialchars($row['GAME_ID']); ?>
        </td>
      <?php
        }
      ?>
    </tr>
  </tbody>
</table>

注：用htmlspecialchars()包裹输出内容，能避免XSS安全问题

2. JavaScript函数部分

修改函数接收当前点击的元素，直接获取它的文本内容：

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
function game_ids(element) {
    var gid = element.innerText.trim(); // 用trim()去掉多余空格
    alert(gid);
    $.post('gamelogs.php', {game_ids_name: gid}, function(data) {
        $('#gamelogs_here').html(data);
    });
}
</script>

更简洁的优化方案（推荐） #

利用jQuery的事件委托，不用给每个手动加onclick，代码更简洁且性能更好：

PHP部分（去掉onclick）

<table id="gameTable">
  <tbody>
    <tr>                
      <?php 
        while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {
      ?>
        <td class='matchuptable'>
            <?php echo htmlspecialchars($row['GAME_ID']); ?>
        </td>
      <?php
        }
      ?>
    </tr>
  </tbody>
</table>

JavaScript部分（事件委托）

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
$('#gameTable').on('click', '.matchuptable', function() {
    var gid = $(this).text().trim();
    alert(gid);
    $.post('gamelogs.php', {game_ids_name: gid}, function(data) {
        $('#gamelogs_here').html(data);
    });
});
</script>

这种方式的好处是：即使后续通过AJAX动态添加新的，点击事件依然有效，不需要重新绑定。

额外格式优化建议 #

• PHP代码中保持缩进一致，提升可读性；
• JavaScript代码使用大括号换行、合理缩进，符合编码规范；
• 如果GAME_ID是纯数字，也可以把值存在<td>的data-*属性中，比如<td data-game-id="<?php echo $row['GAME_ID']; ?>">，获取时用$(this).data('game-id')，比读取文本更可靠。

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