如何正确显示数据库每行数据？按钮触发仅显示首行问题求助

嗨，我看了你的代码，发现几个关键问题导致你只能看到第一行数据，咱们一步步来修复：

问题1：按钮的data-id没有正确解析PHP变量 #

你第一个循环里的按钮代码用了单引号包裹data-id="$id"，PHP在单引号字符串里不会解析变量，所以所有按钮的data-id值都是字符串$id，而不是实际的数据库ID。这样点击任何按钮都会匹配到第一个modal（如果你的JS逻辑默认找第一个，或者ID不匹配的话）。

问题2：重复查询数据库 #

你执行了两次SELECT * FROM note查询，完全没必要，既浪费数据库资源，也增加代码冗余。我们可以把查询结果一次性存到数组里，之后复用。

问题3：缺少modal交互的JavaScript逻辑 #

你的代码里只有modal的HTML结构，但没有对应的JS来控制点击按钮显示对应modal、点击关闭隐藏modal的逻辑，这也会导致看起来只有第一个modal能显示（如果默认显示的话）。

修正后的完整代码 #

<?php 
// 连接数据库
$con = mysqli_connect("localhost","root","","task");
// 检查连接是否成功
if (!$con) {
    die("数据库连接失败: " . mysqli_connect_error());
}

// 只查询一次数据库，把结果存到数组
$results = mysqli_query($con, "SELECT * FROM note");
$notes = [];
while ($row = mysqli_fetch_array($results)) {
    $notes[] = $row;
}

// 表单提交处理（如果当前页面需要处理提交的话）
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // 这里添加你的表单数据插入/更新逻辑，比如：
    $title = test_input($_POST["title"]);
    $note = test_input($_POST["note"]);
    // 插入示例：
    // $sql = "INSERT INTO note (title, note) VALUES ('$title', '$note')";
    // mysqli_query($con, $sql);
    // 提交后可以刷新页面或者跳转，这里示例刷新
    // header("Location: " . $_SERVER['PHP_SELF']);
    // exit;
}

function test_input($data) { 
    $data = trim($data); 
    $data = stripslashes($data); 
    $data = htmlspecialchars($data); 
    return $data; 
} 
?>

<!-- 生成所有按钮 -->
<?php foreach ($notes as $row) { ?>
&nbsp; &nbsp; &nbsp; &nbsp;
<button class="call_modal" data-id="<?= $row['id'] ?>" style="cursor:pointer;"><?= $row['title'] ?></button>
<?php }?>

<!-- 生成所有modal -->
<?php foreach ($notes as $row) { ?>
<div class="note" data-id="<?= $row['id'] ?>" style="display:none;">
    <div class="modal">
        <div class="modal_close close" style="cursor:pointer;">关闭</div>
        <div class="modal_main">
            <br><br>
            <div class="padding">
                <?= $row['title'] ?>
                <br><br><br><br>
                <?= $row['note'] ?>
            </div>
        </div>
    </div>
</div>
<?php }?>

<script>
// 处理按钮点击显示对应modal
document.querySelectorAll('.call_modal').forEach(button => {
    button.addEventListener('click', function() {
        const noteId = this.getAttribute('data-id');
        // 隐藏所有modal
        document.querySelectorAll('.note').forEach(note => {
            note.style.display = 'none';
        });
        // 显示对应ID的modal
        document.querySelector(`.note[data-id="${noteId}"]`).style.display = 'block';
    });
});

// 处理关闭按钮隐藏modal
document.querySelectorAll('.modal_close').forEach(closeBtn => {
    closeBtn.addEventListener('click', function() {
        this.closest('.note').style.display = 'none';
    });
});
</script>

关键修改点说明 #

1. 修复data-id赋值：使用<?= $row['id'] ?>确保PHP变量正确解析为实际的ID值。
2. 复用查询结果：把所有查询到的note数据存到$notes数组，避免重复查询数据库。
3. 添加基础JS交互：实现点击按钮显示对应ID的modal，点击关闭按钮隐藏modal的逻辑，确保每个按钮对应正确的modal。
4. 添加数据库连接检查：增加连接失败的提示，方便排查问题。
5. 可选的表单提交处理：如果当前页面需要处理表单提交，我添加了示例代码，你可以根据实际需求调整。

这样修改后，你点击每个按钮应该都能显示对应的note内容了，所有4行数据都会正确展示。

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