I have an HTML table with a checkmark next to each row. I also have a button at the top that is "Get Selected". What I want to be able to do is:
- Select multiple rows
- Click the "Get Selected" button
- Create a list of the selected rows that gets returned to a Python file, where functions will modify it, then a new table is created of those modifications.
HTML File
{% extends "layout.html" %}{% block content %}<!DOCTYPE html> <html> <body> <input type="button" value="Get Selected" onclick = GetChecked() /><table id="movies" class="table" style="width:100%"><thead><tr><th>Select</th><th>Title</th><th>Year</th><th>Directors</th></tr></thead><tbody> {% for item in data %}<tr><td><input type="checkbox" id = "checkbx" name="select"></td><td>{{item[0]}}</td><td>{{item[1]}}</td><td class="directors">{{item[2]}}</td></tr> {% endfor %}</tbody></table></body> </html>{% endblock %}Python File
@app.route("/recc")def recc(): df = f.movieTable() li = df.values.tolist() return render_template("recc.html", data=li)Table Appearance Before Selecting:
I have not been able to get anything to work when clicking the Get Selected button. Not even an alert message, which I have tried on Safari and Chrome.
This is my most recent script attempt in the HTML file, but I don't know how I would return selectedMovies to the Python file.
<script type="text/javascript"> function GetSelected() { var grid = document.getElementById("movies"); var checkBoxes = grid.getElementsByTagName("INPUT"); var selectedMovies = [] for (var i = 0; i < checkBoxes.length; i++) { if (checkBoxes[i].checked) { var row = checkBoxes[i].parentNode.parentNode; selectedMovies.push(row) } } return selectedMovies; }</script>