flaskで表示させたtableデータを選択されたデータだけflaskに戻す

Question

前提・実現したいこと

flaskで表示させたtableのデータを選択できる様にして、またflaskにデータを送ることは可能でしょうか。
スクレイピングで取ってきたデータをflaskでhtmlに表示しました。
そこからユーザーが選手を選択してそのデータをflaskに返したいのですが上手く行きません。
返したいデータは選手名とその人のデータです。

該当のソースコード

base_ball.py
from IPython import get_ipython
import random
import matplotlib.pyplot as plt
import numpy as np
import pandas as pd
import sys
#野手データ取得
def data_load(year,team):
    BASE_URL = ("http://npb.jp/bis/{}/stats/idb1_{}.html".format(year,team))
    dfs = pd.io.html.read_html(BASE_URL)
#カラムの再設定
    df = dfs[0][1:]; df.columns=dfs[0].loc[0,:]
    new_header = df.iloc[0]
    df = df[1:]
    df.columns = new_header
    df2 = df.rename(columns=lambda s: str(s).replace(" ",""))
    df_i = df2.rename(columns=lambda s: str(s).replace("　",""))
    del df_i['nan']
    df3 = df_i.set_index('選手')
    return df3

app.py
import os
from flask import Flask, render_template,request
import base_ball
app = Flask(__name__)

@app.route('/',methods=["GET","POST"])
def index():
	if request.method == 'POST':
		year = request.form.get('year','')
		team = request.form.get('team','')
		print(year,team)
		if year == '2019' and team == 'bs':
			players = base_ball.data_load(year,'b')
		else:
			players = base_ball.data_load(year,team)
		if int(year) >= 2011 and team == 'db':
			players = base_ball.data_load(year,'yb')
		else:
			players = base_ball.data_load(year,team)
		#players =  base_ball.data_load(year,team)
		players_values = players.values.tolist()
		players_columns = players.columns.tolist()
		players_index = players.index.tolist()
		return render_template('index.html', \
			players_values = players_values, \
			players_columns = players_columns, \
			players_index = players_index)
	return render_template('index.html')

if __name__ == '__main__':
	app.run(debug=True, host='127.0.0.1',port=5000,threaded=True)

index.html
  <fieldset>
    <legend>自チームを選ぼう</legend>
    <form method="post" action="/">
      <label for="year">年代を選択</label>
      <select id="year" name="year">
        <option name="year" value="2005">2005年</option>
        <option name="year" value="2006">2006年</option>
        <option name="year" value="2007">2007年</option>
        <option name="year" value="2008">2008年</option>
        <option name="year" value="2009">2009年</option>
        <option name="year" value="2010">2010年</option>
        <option name="year" value="2011">2011年</option>
        <option name="year" value="2012">2012年</option>
        <option name="year" value="2013">2013年</option>
        <option name="year" value="2014">2014年</option>
        <option name="year" value="2015">2015年</option>
        <option name="year" value="2016">2016年</option>
        <option name="year" value="2017">2017年</option>
        <option name="year" value="2018">2018年</option>
        <option selected name="year" value="2019">2019年</option>
      </select>
      <label><input type="radio" name="team" value="h">ソフトバンク</label>
      <label><input type="radio" name="team" value="l">西武</label>
      <label><input type="radio" name="team" value="e">楽天</label>
      <label><input type="radio" name="team" value="m">ロッテ</label>
      <label><input type="radio" name="team" value="f">日本ハム</label>
      <label><input type="radio" name="team" value="bs">オリックス</label>
      <label><input type="radio" name="team" value="c">広島</label>
      <label><input type="radio" name="team" value="db">横浜</label>
      <label><input type="radio" name="team" value="g">巨人</label>
      <label><input type="radio" name="team" value="t">阪神</label>
      <label><input type="radio" name="team" value="s">ヤクルト</label>
      <label><input type="radio" name="team" value="d">中日</label>
    </fieldset>
    <div><input type="submit" value="決定"></div>
    </form>
    <table>
      <thead>
        <tr>{%- for i in players_columns %}<th>{{ i|e }}</th>{%- endfor %}</tr>
      </thead>
      <tbody>
        {%- for i in players_values %}
        <tr><th>{{ players_index[loop.index0]|e }}</th>{% for j in i %}<td>{{ j|e }}</td>{% endfor %}</tr>
        {%- endfor %}
      </tbody>
    </table>
  <fieldset>

補足情報（FW/ツールのバージョンなど）

python3.7

Answer 1

可能です。

そのままだと面倒そうなので、DataTablesのようなありものを組み合わせると楽です。

以下は行を選択した後に「Delete selected row」を押すと行を消します。
DataTables

ご覧の通り簡単に選択した行がわかっていますので、選択した行の内容も簡単に取得可能です。

自分で実装する場合は、行(tr)にdata-を付けたり、onclickイベントにajaxでpostするようなイベントを追加したりと考える必要があります。

なお、質問が返ってきそうなので事前に書きますが、以下はそれぞれ別に考えた方が良いです。

1. 行を選択できる様にする

(フロントエンド側、HTML および JavaScript, Form埋め込みならHTML単体。画面遷移するかによる。tableって選択できる様になっていませんので、選択できる様にしましょう。)
2. 選択した行のデータを取得する
(フロントエンド側、JavaScriptや、jinja2の出力を工夫する。選択できても「何のデータを取得するか」は開発者が頑張らないといけません。)
3. データを送信できるようにする
(フロントエンド側、formでPOSTするのか、ajaxなのか。)
4. データを受け取る処理を作る
(バックエンド側、Flask。データを受けるのはFlaskの役目です。サーバで動かすならHTTPサーバの役目ですが。)
5. バックエンドで受け取ったデータを処理する
(バックエンド側：Flask、必要な処理を行いましょう。)

Comments

[HaTea]

ご回答ありがとうございます。
DataTablesを調べてみました。とても便利な機能で使ってみようと思うのですが、スクレイピングしてきたデータでも使用する事は出来るでしょうか。
javascriptの知識が乏しいので的外れな質問でしたらすいません。

[FiroProchainezo]

DataTablesはTableに適応するような形で使いますので、データがなんであろうが、Tableがあれば使用可能です。

トップページ左側にGetting startedがあるので試してみてはいかがでしょうか。
https://datatables.net/

JavaScriptなしで実施するのは厳しいものがありますので、とりあえず手を止めて、JavaScriptを勉強した方が良いと思います。

[HaTea]

ご丁寧にありがとうございます。一度勉強に切り替えたいと思います。