如何实现点击MySQL填充的表格单元格并传数据至另一PHP页面

嘿，我来帮你搞定点击表格单元格把内容传到另一个PHP页面的需求！咱们一步步修改你的代码就行：

核心思路是给每个表格单元格添加点击事件，用JavaScript获取内容后，通过GET/POST方式传递到目标PHP页面。下面是具体的修改方案：

1. 修改PHP生成表格的代码 #

给每个<td>标签添加点击事件，同时把单元格内容和对应列名（方便后端识别来源）作为参数传递给处理函数：

$q = "SELECT SuperBowl AS super, YearPlayed as year, Winner AS winner, Loser as loser, Score as score FROM superbowl ORDER BY YearPlayed DESC";
$result = @mysqli_query ($dbcon, $q); // Run the query.
if ($result) { // If it ran OK, display the records.
    // Table header.
    echo '<table> <tr><th>Superbowl</th><th>Year Played</th><th>Winner</th><th>Loser</th><th>Score</th></tr>';
    // Fetch and print all the records:
    while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
        // 给每个td绑定点击事件，调用sendData函数传递内容和列标识
        echo '<tr>
                <td onclick="sendData(\'' . addslashes($row['super']) . '\', \'superbowl\')">' . $row['super'] . '</td>
                <td onclick="sendData(\'' . $row['year'] . '\', \'year\')">' . $row['year'] . '</td>
                <td onclick="sendData(\'' . addslashes($row['winner']) . '\', \'winner\')">'. $row['winner'] . '</td>
                <td onclick="sendData(\'' . addslashes($row['loser']) . '\', \'loser\')">'. $row['loser'] . '</td>
                <td onclick="sendData(\'' . $row['score'] . '\', \'score\')">'. $row['score'] . '</td>
              </tr>';
    }
    echo '</table>'; // Close the table.
    mysqli_free_result ($result); // Free up the resources.
} else { // If it did not run OK.
    // Public message:
    echo '<p class="error">The current users could not be retrieved. We apologize for any inconvenience.</p>';
    // Debugging message:
    echo '<p>' . mysqli_error($dbcon) . '<br><br />Query: ' . $q . '</p>';
} // End of if ($r) IF.
mysqli_close($dbcon); // Close the database connection.

注：用addslashes处理内容里的单引号，避免JavaScript语法报错

2. 添加JavaScript处理函数 #

在页面底部（或者<head>里）添加一个<script>标签，定义处理点击事件的函数：

<script>
function sendData(content, column) {
    // 用GET方式跳转，encodeURIComponent处理特殊字符（比如空格、&）
    window.location.href = '你的目标PHP页面.php?content=' + encodeURIComponent(content) + '&column=' + encodeURIComponent(column);
    
    // 如果需要更安全的POST方式，可以用下面这段代码替换上面的跳转：
    /*
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '你的目标PHP页面.php';
    
    const contentInput = document.createElement('input');
    contentInput.type = 'hidden';
    contentInput.name = 'content';
    contentInput.value = content;
    
    const columnInput = document.createElement('input');
    columnInput.type = 'hidden';
    columnInput.name = 'column';
    columnInput.value = column;
    
    form.appendChild(contentInput);
    form.appendChild(columnInput);
    document.body.appendChild(form);
    form.submit();
    */
}
</script>

把你的目标PHP页面.php替换成你实际要跳转的页面文件名

3. 目标PHP页面接收参数 #

在目标页面里，通过$_GET或者$_POST获取传递过来的变量，就可以使用了：

<?php
// GET方式获取
$content = isset($_GET['content']) ? htmlspecialchars($_GET['content']) : '';
$column = isset($_GET['column']) ? htmlspecialchars($_GET['column']) : '';

// 如果用POST方式，就换成下面的代码：
/*
$content = isset($_POST['content']) ? htmlspecialchars($_POST['content']) : '';
$column = isset($_POST['column']) ? htmlspecialchars($_POST['column']) : '';
*/

// 这里可以对变量做任何你需要的操作，比如输出、查询数据库等
echo '你点击的单元格内容：' . $content . '<br>';
echo '对应的列：' . $column;
?>

用htmlspecialchars输出内容，防止XSS攻击

这样修改后，用户点击表格里的任意单元格，都会把内容传递到你指定的PHP页面啦！

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