如何在SQL查询生成的动态表格每行开头添加按钮？

为什么按钮位置不对？ #

你的代码里有两个关键错误导致了布局错乱：

1. 表头与内容列数不匹配：你只在表格内容的每个数据单元格前都加了按钮单元格，但表头$table_header里没有对应的列来容纳这个按钮列。浏览器渲染表格时，列数不一致会触发自动布局调整，最终导致按钮被挤到错误位置。
2. 按钮插入逻辑错误：你在遍历每行的每个数据值时都插入了按钮，这意味着每个数据项前面都会多一个按钮，而不是每行开头只放一个按钮。

修复步骤与改进代码 #

1. 给表头添加按钮列

首先需要修改$table_header，在开头插入一个空的表头单元格（也可以加"操作"这类标题），确保表头和内容的列数一致：

// 在原有表头前插入按钮列的表头单元格
$table_header = "<th></th>" . $table_header;
// 如果需要显示标题，可改为：$table_header = "<th>操作</th>" . $table_header;

2. 调整每行的生成逻辑

遍历每行数据时，先单独添加一个按钮单元格，再遍历所有数据值生成对应的单元格，避免每个数据项都带按钮：

while($row = pg_fetch_row($result)){
    $texte .= "<tr>";
    // 先添加每行开头的按钮，把当前行数据转成JSON方便弹窗使用
    $rowJson = json_encode($row);
    $texte .= "<td><button type='button' class='btn btn-primary' onclick='showRowDetail($rowJson)'>查看详情</button></td>";
    
    // 再遍历每行数据生成普通单元格
    foreach ($row as $value){
        $texte .= "<td style='word-break: keep-all'>$value</td>";
    }
    $texte .= "</tr>";
}

3. 补充弹窗的JS函数（可选）

可以在页面中添加一个简单的弹窗函数，用来展示行内容：

function showRowDetail(rowData) {
    // 把数组转成可读的字符串，用换行分隔
    const detailText = rowData.join('\n');
    // 原生alert示例，也可以替换为Bootstrap模态框等更美观的组件
    alert('行详情：\n' + detailText);
}

完整修改后的代码片段 #

$result = Db::query($requete);
// 给表头添加按钮列
$table_header = "<th></th>" . $table_header;
$texte = "<table class='table table-bordered table-sm'><thead>$table_header</thead>";
$texte .= "<tbody>";
if (!pg_num_rows($result)){
    $nb_ligne = "Aucune ligne trouvée !";
}else{
    $nb_ligne ="Nombre de lignes : ".pg_num_rows($result);
}
while($row = pg_fetch_row($result)){
    $texte .= "<tr>";
    // 每行开头的按钮
    $rowJson = json_encode($row);
    $texte .= "<td><button type='button' class='btn btn-primary' onclick='showRowDetail($rowJson)'>查看详情</button></td>";
    // 遍历数据生成单元格
    foreach ($row as $value){
        $texte .= "<td style='word-break: keep-all'>$value</td>";
    }
    $texte .= "</tr>";
}
$texte .= "</tbody></table>";
$response = new Response();
$response->assign('nb_ligne', 'innerHTML', $nb_ligne);
$response->assign('tableau_resultat', 'innerHTML', $texte);
return $response;

这样修改后，每行开头都会有一个独立按钮，表头也对应了按钮列，布局不会再错乱。同时把行数据转成JSON传给弹窗函数，也能方便你在弹窗里展示完整的行内容。

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