Flask中如何处理表格行编辑删除按钮点击以实现CSV数据增删改

实现对应需求不强制使用form表单，有两种常用实现方案，刚接触Flask优先选择第一种即可：

方案1：URL路由跳转实现（无需额外JS知识，逻辑简单） #

步骤1：编写后端路由 #

在你的Flask启动文件中添加如下代码：

from flask import render_template, redirect, url_for, request
import csv

# 假设你的CSV文件统一存在uploads/data.csv路径下，可根据自己的实际路径修改
# 编辑页路由，接收行索引参数
@app.route('/edit/<int:row_index>', methods=['GET', 'POST'])
def edit_row(row_index):
    # 读取CSV全量数据
    with open('uploads/data.csv', 'r', encoding='utf-8') as f:
        all_rows = list(csv.reader(f))
    
    # 提交编辑后的数据的逻辑
    if request.method == 'POST':
        # 用表单提交的新内容替换原行数据
        new_row = [request.form.get(header) for header in all_rows[0]]
        all_rows[row_index] = new_row
        # 写回CSV文件
        with open('uploads/data.csv', 'w', encoding='utf-8', newline='') as f:
            csv.writer(f).writerows(all_rows)
        # 跳转回表格列表页，假设你的列表页路由函数名为home
        return redirect(url_for('home'))
    
    # 打开编辑页的逻辑
    return render_template('edit.html', headers=all_rows[0], row=all_rows[row_index], row_index=row_index)

# 删除行路由
@app.route('/delete/<int:row_index>')
def delete_row(row_index):
    with open('uploads/data.csv', 'r', encoding='utf-8') as f:
        all_rows = list(csv.reader(f))
    # 删除对应索引的行
    del all_rows[row_index]
    # 写回CSV
    with open('uploads/data.csv', 'w', encoding='utf-8', newline='') as f:
        csv.writer(f).writerows(all_rows)
    return redirect(url_for('home'))

步骤2：修改现有表格模板的按钮链接 #

把你现有模板中编辑、删除按钮的空href替换为路由生成的链接：

<td width="130">
    <a href="{{ url_for('edit_row', row_index=loop.index) }}" class="btn btn-secondary btn-sm">Edit</a>
    <a href="{{ url_for('delete_row', row_index=loop.index) }}" class="btn btn-danger btn-delete btn-sm" onclick="return confirm('确定要删除这行吗？')">Delete</a>
</td>

这里加的onclick逻辑是为了防止误删，可直接复用。

步骤3：新增编辑页模板 #

在templates文件夹下新建edit.html文件，内容示例如下：

{% extends 'base.html' %}

{% block title %}编辑行数据{% endblock %}

{% block content %}
<h3>编辑第{{ row_index }}行数据</h3>
<form method="POST">
  {% for i in range(headers|length) %}
  <div class="mb-3">
    <label class="form-label">{{ headers[i] }}</label>
    <input type="text" class="form-control" name="{{ headers[i] }}" value="{{ row[i] }}" required>
  </div>
  {% endfor %}
  <button type="submit" class="btn btn-primary">保存修改</button>
  <a href="{{ url_for('home') }}" class="btn btn-secondary">取消</a>
</form>
{% endblock %}

方案2：AJAX无刷新实现（无需跳转页面，体验更好，需少量JS） #

如果不想每次操作都跳转页面，可以用AJAX异步提交请求，只刷新页面局部内容：

步骤1：改造后端删除路由 #

from flask import jsonify

@app.route('/delete/<int:row_index>', methods=['POST'])
def delete_row(row_index):
    with open('uploads/data.csv', 'r', encoding='utf-8') as f:
        all_rows = list(csv.reader(f))
    del all_rows[row_index]
    with open('uploads/data.csv', 'w', encoding='utf-8', newline='') as f:
        csv.writer(f).writerows(all_rows)
    # 返回JSON格式的成功标识
    return jsonify({'status': 'success'})

步骤2：修改删除按钮属性 #

给删除按钮添加自定义属性存储行索引，同时加个专属类名用于JS绑定事件：

<a href="javascript:;" data-row="{{ loop.index }}" class="btn btn-danger btn-delete btn-sm js-delete">Delete</a>

步骤3：添加JS交互逻辑 #

在表格模板的底部添加如下JS代码：

document.querySelectorAll('.js-delete').forEach(btn => {
  btn.addEventListener('click', function() {
    if (confirm('确定要删除吗？')) {
      const rowIndex = this.dataset.row
      // 发送异步删除请求
      fetch(`/delete/${rowIndex}`, { method: 'POST' })
        .then(res => res.json())
        .then(data => {
          if (data.status === 'success') {
            // 直接移除当前行的DOM元素，不需要刷新整个页面
            this.closest('.table__row').remove()
          }
        })
    }
  })
})

两种方案都可正常运行，编辑功能因为需要提交用户修改后的内容，必须用到form（无论是跳转提交还是AJAX异步提交），删除功能可以直接用a标签跳转实现，不需要form。

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