如何将PHP数组数据自动填充到Bootstrap动态HTML表格各行？

没问题，要实现根据PHP数组自动生成对应行数的表格并填充数据，同时保留原Bootsnipp动态表格的添加/删除功能，你可以按照以下步骤来做：

1. 先处理PHP数组 #

首先拆分并清理原始数据，避免空元素导致无效的空输入框：

<?php
// 获取原始字符串并拆分成数组
$test = $object2->schoolname;
$array = explode(',', $test);
// 过滤数组中的空元素（比如字符串首尾逗号产生的空值）
$array = array_filter($array);
// 重置数组索引（可选，避免索引不连续的问题）
$array = array_values($array);
?>

2. 自动生成表格行 #

在HTML表格的<tbody>中，通过foreach循环遍历数组，为每个元素生成一行，同时保留原模板的交互按钮逻辑：

<table class="table table-bordered" id="dynamic_field">
    <thead>
        <tr>
            <th>学校名称</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <!-- 循环生成数组对应的表格行 -->
        <?php foreach($array as $index => $school): ?>
        <tr id="row<?php echo $index + 1; ?>">
            <td>
                <!-- 用htmlspecialchars转义内容，防止XSS攻击 -->
                <input type="text" name='schoolname[]' value="<?php echo htmlspecialchars($school); ?>" class="form-control"/>
            </td>
            <td>
                <button type="button" name="remove" id="<?php echo $index + 1; ?>" class="btn btn-danger btn_remove">删除</button>
            </td>
        </tr>
        <?php endforeach; ?>

        <!-- 添加一行带「添加」按钮的空行，保持动态添加功能 -->
        <tr id="row<?php echo count($array) + 1; ?>">
            <td><input type="text" name='schoolname[]' class="form-control"/></td>
            <td><button type="button" name="add" id="add" class="btn btn-success">添加</button></td>
        </tr>
    </tbody>
</table>

3. 调整JavaScript逻辑 #

原模板的JS需要修改初始计数，避免新添加的行ID和已生成的行冲突：

$(document).ready(function(){
    // 初始计数从已生成的行数开始（即数组的长度）
    var i = <?php echo count($array); ?>;

    // 添加新行的逻辑
    $('#add').click(function(){
        i++;
        $('#dynamic_field').append(`
            <tr id="row${i}">
                <td><input type="text" name="schoolname[]" class="form-control"/></td>
                <td><button type="button" name="remove" id="${i}" class="btn btn-danger btn_remove">删除</button></td>
            </tr>
        `);
    });

    // 删除行的逻辑
    $(document).on('click', '.btn_remove', function(){
        var button_id = $(this).attr("id");
        $('#row' + button_id).remove();
    });
});

关键注意事项 #

• 安全规范：一定要用htmlspecialchars()转义输出的学校名称，这是防止XSS攻击的基础操作，避免恶意代码注入。
• 空数组兼容：如果原始字符串为空或者拆分后数组为空，代码会自动生成一行空输入框和添加按钮，保证页面功能正常可用。
• 模板匹配：确保表格ID（dynamic_field）、按钮类名（btn_remove）、添加按钮ID（add）和原Bootsnipp模板完全一致，否则添加/删除的交互逻辑会失效。

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