表格单元格上的弹出窗口取决于值

Question

我目前正在开发一个网站（使用 Flask），该网站具有一个包含某些值的缩写代码的数据表。我的目标是在这些单元格上有一个弹出窗口，以便在弹出窗口中具有完整的含义。 例如。 HTML 表（图 1）中的 EXT10 单元格悬停时将有一个弹出窗口，其中包含来自 SQL 数据库（图 2）的相关值（10 分钟额外时间）以及表的其余部分。

目前，我尝试使用 JetBrains AI 解决此问题，它为 HTML 提供了此功能，但收效甚微：

<tbody>
            {% for student in allstudents %}
                <tr>
                    {% for key, value in student.items() %}
                        <td>
                        {% if key in ['Adjustment1', 'Adjustment2', 'Adjustment3'] and value in adj_ref %}
                            <div data-toggle="popover" data-trigger="hover" data-content="{{ adj_ref[value] }}">
                                {{ value }}
                            </div>
                            {% else %}
                                {{ value }}
                            {% endif %}
                        </td>
                    {% endfor %}
                </tr>
            {% endfor %}
            </tbody>

我还将在我的App.py中附加用于获取数据的相关Python函数和相关的app.routes

def students():
    con, c = establishcon()
    c.execute('''
    SELECT * FROM jimboombass_studentadjustments.students
    ''')
    data = c.fetchall()
    con.close()
    return [dict(zip([column[0] for column in c.description], row)) for row in data]

def adjustment_reference():
    con, c = establishcon()
    c.execute('''
        SELECT * FROM jimboombass_studentadjustments.adjustment_reference
        ''')
    data = c.fetchall()
    return dict(data)

@app.route('/students', methods=['GET', 'POST'])
def students():
    username = session.get('user_data').get("username")
    profile_pic = session.get('user_data').get("profile_pic")
    if request.method == 'POST':
        StudentID = request.form.get('StudentIDInput')
        FirstName = request.form.get('FirstNameInput')
        LastName = request.form.get('LastNameInput')
        Email = request.form.get('EmailInput')
        Homeroom = request.form.get('HomeroomInput')
        Adjustments = request.form.getlist('adjustment_select')

        data = DB_Functions.student_search(StudentID, FirstName, LastName, Email, Homeroom, Adjustments)

    else:
        data = DB_Functions.students()

    adjustment_reference = DB_Functions.adjustment_reference()

    return render_template('students.html', allstudents=data, username=username, profilepic=profile_pic, adj_ref=adjustment_reference)

不幸的是，人工智能为我提供的可行解决方案很少，这就是我转向这里的原因。在任何人询问之前，弹出窗口所需的 Bootstrap 链接和 JS 都包含在我的 base.html 中，该文件是用 Jinja 代码块扩展的。

任何解决方案或潜在的想法将不胜感激。 谢谢

Answer 1

您需要将

data

属性替换为

data-bs

，并且必须使用 JavaScript 手动初始化弹出窗口。

试试这个：

  <tbody>
  {% for student in allstudents %}
      <tr>
          {% for key, value in student.items() %}
              <td>
              {% if key in ['Adjustment1', 'Adjustment2', 'Adjustment3'] and value in adj_ref %}
                  <div data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="{{ adj_ref[value] }}">
                      {{ value }}
                  </div>
                  {% else %}
                      {{ value }}
                  {% endif %}
              </td>
          {% endfor %}
      </tr>
  {% endfor %}
  </tbody>

  <script>
    const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
    const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl));
</script>

参见：BS5 Popovers