获取HTML表行数据到Flask function

Question

I have an HTML table with several columns in the below template. The last column of the table has a button. The code is as follows.

index.html

<table id="deployment_table" class="table table-striped">
   <thead>
      <tr>
         {% for col in colnames %}
         <th>{{ col }}</th>
         {% endfor %}
      </tr>
   </thead>
   <tbody>
      {% for record in records %}
      <tr>
         {% for col in colnames %}
         <td>{{ record[col] }}</td>
         {% endfor %}
         <td class="td-actions text-right">
            <a href=ct_edit ><input type="submit" name="edit_btn" value="update"rel="tooltip" class="btn btn-info"></a>
            </input>
         </td>
      </tr>
      {% endfor %}
   </tbody>
</table>

When the user click the button of a specific row, I need to pass the value of the first column of the selected row to a Flask function and load another HTML page using this data.

Below is the flask back end function.

@app.route('/ct_edit')
def ct_edit():
    print('ct_edit')
    # the value of the first column of the selected row => ID
    # do something with the ID value and get a result
    return render_template('ct_edit.html', result=result) 

So far I'm unable to make this work. Can I please have any advice for this?

Answer 1

First of all, note that your input tag closes the anchor tag when it should be the other way around not sure it does affect the code in this example but it's good to keep them in order though.

Second thing, Flask has something called url_for which helps you take an advantages of Jinja template and instead of hardcoding the html's page name you can refer to respective functions' name and pass a specific variables (You do that as shown below - in places where you have reference or action you place in href = "{{ url_for(" name of the function ") }}"

In this example since you want to get to a specific record - point a specific value for each record. I placed row["id"] which refers to specific unique value for this record in the table (I assume you have some column that has unique values for every row - that's what should be placed in url_for).

Then in the Flask function ct_edit which is responsible for displaying specific row you've choosen by clicking an anchor tag, should receive that unique value as an argument(place it in route as well so that the records would be distinguishable).

<a href="{{ url_for("ct_edit", record_id = row["id"]) }}"><input type="submit" name="edit_btn" value="update"rel="tooltip" class="btn btn-info">
        <i class="material-icons"></i></input></a>

@app.route('/ct_edit/<int:record_id>')
def ct_edit(record_id):
    print('ct_edit')
    # the value of the first column of the selected row => ID
    # do something with the ID value and get a result
    return render_template('ct_edit.html', result=result) 

I hope I managed to brighten thigs for you a little bit.

Keep well:)