Materialize CSS模态框点击表格按钮仅获取最后一行数据问题

你的核心问题出在服务器端渲染的变量覆盖，以及Materialize模态框和Bootstrap的触发逻辑差异上。

当你在while循环外渲染模态框，或者循环内的模态框直接使用PHP变量填充内容时，循环结束后所有PHP变量都会停留在最后一条记录的值——毕竟PHP是服务器端语言，所有HTML内容都是循环完成后才输出到前端的，所以不管你给模态框加多少个唯一ID，里面的内容都会被最后一行数据覆盖。另外你还混用了Bootstrap的data-toggle属性，这和Materialize的模态框触发逻辑不兼容。

我分两步帮你彻底解决这个问题：

1. 循环内渲染专属模态框+正确触发按钮 #

把每个用户的模态框放到while循环内部，让每个模态框在循环过程中就填充好当前用户的专属数据，同时用Materialize要求的方式设置触发按钮：

while ($row = mysqli_fetch_assoc($select_user)){
    $account_id = $row['account_id']; 
    $username = $row['username']; 
    $firstname = $row['firstname']; 
    $middlename = $row['middlename']; 
    $lastname = $row['lastname']; 
    $house_number = $row['house_number']; 
    $street_name = $row['street_name']; 
    $provincial_address = $row['provincial_address']; 
    $gender = $row['gender']; 
    $occupation = $row['occupation']; 
    $cel_number = $row['cel_number']; 
    $tel_number = $row['tel_number']; 
    $house_model_name = $row['house_model_name']; 
    $mdues_status = $row['mdues_status']; 
    $account_status_name = $row['account_status_name']; 
    $address = '#'. $house_number.' '.$street_name; 
    $fullName = $firstname.' '.$middlename[0].'. '.$lastname; 
    $fullContact = $cel_number.' , '.$tel_number; 

    // 输出表格行和编辑按钮（注意用href指向当前用户的模态框ID）
    echo "<tr>";
    // 这里补充你其他表格列的输出，比如echo "<td>{$fullName}</td>";
    echo "<td><button class='waves-effect waves-light btn update modal-trigger' href='#billingModal{$account_id}' style='margin: 5px; background-color: #6E6702;'><i class='material-icons left'>create</i>Edit</button></td>";
    echo "</tr>";

    // 输出当前用户专属的模态框，直接填充循环内的变量
    echo "<div id='billingModal{$account_id}' class='modal' role='dialog'>";
    echo "<div class='modal-content'>";
    echo "<h5>{$account_id}</h5>";
    echo "<div class='divider'></div>";
    echo "<p>{$address}<br> {$cel_number}</p>";
    echo "</div>";
    echo "<div style='margin: 20px;'>";
    echo "<div class='row'>";
    echo "<h5><span style='background-color: #B7AFAF;'>Billing Summary</span></h5>";
    echo "<div class='divider'></div>";
    echo "</div>";
    echo "</div>";
    echo "<div class='modal-footer'>";
    echo "<a href='#' class='modal-action modal-close waves-effect waves-green btn' style='margin: 5px; background-color: #B7AFAF;'>Close</a>";
    echo "<a href='#' class='modal-action modal-close waves-effect waves-green btn' style='margin: 5px; background-color: #B7AFAF;'>Print</a>";
    echo "<a href='#' class='modal-action modal-close waves-effect waves-green btn' style='margin: 5px; background-color: #108DC9;'>Pay</a>";
    echo "</div>";
    echo "</div>";
}

2. 正确初始化Materialize模态框 #

Materialize的模态框必须通过JavaScript初始化，尤其是动态生成的模态框，要在DOM加载完成后统一初始化：

在页面底部（</body>标签前）添加这段JS代码：

document.addEventListener('DOMContentLoaded', function() {
    // 选中所有模态框元素并初始化
    var modalElements = document.querySelectorAll('.modal');
    M.Modal.init(modalElements);
});

• 不要把模态框放在循环外：PHP循环结束后变量会保留最后一次的值，循环外的模态框只能拿到最后一行数据。
• 别混用Bootstrap属性：Materialize用modal-trigger类+href指向模态框ID，不需要Bootstrap的data-toggle/data-target。
• 必须初始化所有模态框：动态生成的模态框不能只初始化单个，要用querySelectorAll选中所有.modal元素统一初始化。

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