如何为每一行创建 HTML 表格按钮并将第一列的值输入到 Flask 函数进行查询

Question

I have an HTML table that I want to have a button named "more details" for each row at the last column.

I want to have the ability that when I click on "more details" button for each row, the value of month (which is the first column of the table, for example: '2021-10') for that specific row will send to a flask function to query info only for that specific month, and then the browser will jump to another HTML file (monthly_sales_report_sub.html) that display the new info as a table that contains one row.

What is the best way to make the HTML code and flask function work? My current code will show all the months records on monthly_sales_report_sub.html

Thanks in advance!

The HTML code below (monthly_sales_report.html):

           <table width=80%>
                <!-- Show Report Table -->
                <thead>
                    <tr>
                        {% for header in headings %}
                        <th>{{ header }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for row in data %}
                    <tr>
                        {% for cell in row %}
                        <td>{{ cell }}</td>
                        {% endfor %}
                        <td class="td-actions text-right">
                            <a href=monthly_sales_report_sub><input type="submit" value="more details"><</input></a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

My current flask function looks like this:

@api.route('/monthly_sales_report', methods=['GET'])
def monthly_sales_table():
    return render_template("monthly_sales_report.html", headings=SQL_Operations.get_monthly_sales_report(connection)['headings'], data=SQL_Operations.get_monthly_sales_report(connection)['rows'])

@api.route('/monthly_sales_report_sub', methods=['GET'])
def monthly_sales_table_sub():
    return render_template("monthly_sales_report_sub.html", headings=SQL_Operations.get_monthly_sales_report_sub(connection)['headings'], data=SQL_Operations.get_monthly_sales_report_sub(connection)['rows'])

SQL_Operations.py

def get_monthly_sales_report_sub(connection):
    cursor = connection.cursor()
    query = ("""SELECT month, sales_person, total_num_sold, total_sales FROM Sale;""")
    cursor.execute(query)
    res = []
    for (month, sales_person, total_num_sold, total_sales) in cursor:
        res.append([month, sales_person, total_num_sold, total_sales])
    res_new = dict()
    res_new['headings'] = ['month', 'sales_person', 'total_num_sold', 'total_sales']
    res_new['rows'] = res
    return res_new

Answer 1

In flask you can create routes with arguments

@app.route('/detail/<month>',methods = ['GET'])

In your table you can use a button or a tag button with:

<a href={{ url_for('detail',month = your_row_month_value) }} ... 

You have to add url_for to your Flask imports