WTForm场景下使用JavaScript删除条目与创建表格方案咨询

实现方案 #

推荐方案：纯前端实现（无需后端请求） #

你不需要将数据持久化到数据库，完全可以把program列表存在浏览器端JS变量中，省略后端请求步骤，逻辑更简单，性能更好。

实现要点：

• 定义全局JS数组存储program数据
• 绑定schedule按钮点击事件，读取表单字段存入数组后渲染表格
• 封装独立的表格渲染函数，数据变动后重新生成表格内容
• remove操作直接过滤数组后重新渲染，无需调用后端接口

完整修改代码：

<div>
    <form method="POST" action="">
        {{ form.csrf_token }}
        <fieldset class="form-group">
            <legend>Add Students</legend>
            <div class="form-group">
                {{form.program_id.label(class="col-sm-1 col-form-label")}}
                {{form.program_id(id="program_id")}}
            </div>
            <div class="form-group">
                {{form.program_name.label(class="col-sm-1 col-form-label")}}
                {{form.program_name(id="program_name")}}
            </div>
            <div class="form-group">
                {{form.program_description.label(class="col-sm-1 col-form-label")}}
                {{form.program_description(id="program_description")}}
            </div>         
            <div class="form-group" align="justify">
                {{form.cancel(class="btn btn-outline-info")}}
                <!-- 给schedule按钮加id，绑定点击事件 -->
                <button type="button" class="btn btn-outline-info" id="scheduleBtn">Schedule</button>
            </div>
            <!-- 给表格加id，方便JS操作 -->
            <table id="programTable" class="table table" border="1">
                <tr>
                    <th>ID</th>
                    <th>program_title</th>
                    <th>program_description</th>
                    <th>操作</th>
                </tr>
            </table>
        </fieldset>
    </form>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 全局数组存储program列表
        let programList = [];
        // 表格渲染函数
        function renderTable() {
            let tableHtml = `
            <tr>
                <th>ID</th>
                <th>program_title</th>
                <th>program_description</th>
                <th>操作</th>
            </tr>
            `;
            // 遍历数组生成行
            programList.forEach(program => {
                tableHtml += `
                <tr>
                    <td>${program.program_id}</td>
                    <td>${program.program_name}</td>
                    <td>${program.program_description}</td>
                    <td>
                        <input type="button" value="Remove" class="btn btn-danger" onclick="removeProgram('${program.program_id}')">
                    </td>
                </tr>
                `
            })
            // 替换表格内容
            $('#programTable').html(tableHtml);
        }
        // schedule按钮点击事件
        $('#scheduleBtn').click(function() {
            // 读取表单值
            let programId = $('#program_id').val();
            let programName = $('#program_name').val();
            let programDesc = $('#program_description').val();
            // 校验非空
            if (!programId || !programName || !programDesc) {
                alert('请填写完整信息');
                return;
            }
            // 存入数组
            programList.push({
                program_id: programId,
                program_name: programName,
                program_description: programDesc
            });
            // 清空表单
            $('#program_id, #program_name, #program_description').val('');
            // 重新渲染表格
            renderTable();
        })
        // 删除函数
        function removeProgram(programId) {
            // 过滤掉对应id的数据
            programList = programList.filter(item => item.program_id !== programId);
            // 重新渲染表格
            renderTable();
        }
    </script>
</div>

若坚持使用后端交互方案，修复原代码问题即可： #

你原代码的核心问题是在JS中混用了Jinja模板语法，{{each_data.program_id}}是后端渲染语法，前端运行时无法识别，其次是字符串拼接逻辑错误，没有将生成的表格插入到DOM中。
修改后success回调逻辑：

success: function (data) {
    // 后端返回的data需为JSON格式的数组
    let tableHtml = `
    <tr>
        <th>ID</th>
        <th>program_id</th>
        <th>program_title</th>
        <th>program_description</th>
    </tr>
    `;
    // 遍历返回的数组拼接行
    data.forEach(each_data => {
        tableHtml += `
        <tr>
            <td>${each_data.program_id}</td>
            <td>${each_data.program_title}</td>
            <td>${each_data.program_description}</td>
            <td>
                <input type="button" value="Remove" class="btn btn-danger" onclick="removeProgram(this)" data-program-id="${each_data.program_id}">
            </td>
        </tr>
        `
    })
    // 替换页面原有表格内容
    $('table.table').html(tableHtml);
}

另外注意移除按钮上的data-program-list属性，不需要将整个列表存在DOM中传输，后端可以用session存储program列表，不需要前端传递。

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