如何实现HTML表格选中多行数据传递至Python后端并处理？

一、先解决按钮无响应问题 #

你的HTML按钮绑定的函数是GetChecked()，但JS里定义的函数名是GetSelected，名字不匹配导致点击没反应，直接修正按钮的绑定：

<input type="button" value="Get Selected" onclick="GetSelected()" />

二、修改JS函数，提取选中行的有效数据 #

原来的JS把DOM行元素存进数组，没法直接传给后端，得提取每行的电影实际信息（标题、年份、导演），再通过AJAX发送给后端：

<script type="text/javascript">
function GetSelected() {
    // 选中所有已勾选的复选框
    var checkedBoxes = document.querySelectorAll("#movies input[type='checkbox']:checked");
    var selectedMovies = [];

    // 遍历每个勾选框，提取对应行的数据
    checkedBoxes.forEach(box => {
        var row = box.closest("tr");
        selectedMovies.push({
            title: row.cells[1].textContent.trim(),
            year: row.cells[2].textContent.trim(),
            directors: row.cells[3].textContent.trim()
        });
    });

    // 把数据传给后端处理
    sendToBackend(selectedMovies);
}

function sendToBackend(data) {
    fetch("/process-selected", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(data)
    })
    .then(res => res.text())
    .then(html => {
        // 用后端返回的新表格替换当前页面内容
        document.body.innerHTML = html;
    })
    .catch(err => console.log("请求出错：", err));
}
</script>

三、后端新增路由接收数据并处理 #

在你的Python代码里加一个POST路由，接收前端传的选中数据，处理后生成新表格返回：

from flask import request, render_template
import json

@app.route("/recc")
def recc():
    df = f.movieTable()
    li = df.values.tolist()
    return render_template("recc.html", data=li)

@app.route("/process-selected", methods=["POST"])
def process_selected():
    # 获取前端传的选中电影数据
    selected_movies = json.loads(request.get_data())
    
    # 这里写你的业务处理逻辑，比如生成推荐列表
    # 示例：模拟处理后得到新数据
    new_data = []
    for movie in selected_movies:
        new_data.append([movie["title"], movie["year"], movie["directors"], "已推荐"])
    
    # 渲染新表格模板返回给前端
    return render_template("result-table.html", data=new_data)

四、新建结果表格模板 #

创建result-table.html用来展示处理后的新表格：

{% extends "layout.html" %}
{% block content %}
<h3>处理结果</h3>
<table class="table" style="width:100%">
    <thead>
        <tr>
            <th>标题</th>
            <th>年份</th>
            <th>导演</th>
            <th>状态</th>
        </tr>
    </thead>
    <tbody>
        {% for item in data %}
        <tr>
            <td>{{item[0]}}</td>
            <td>{{item[1]}}</td>
            <td>{{item[2]}}</td>
            <td>{{item[3]}}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock %}

额外优化小细节 #

原代码里所有复选框的id都是checkbx，不符合HTML规范，改成唯一ID：

<td><input type="checkbox" id="check-{{loop.index}}" name="select"></td>

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