使用 Python、HTML 和 CSS 获取要在模态上显示的数据

问题描述 投票:0回答:1

我希望这些数据显示在我的模态中,该模态基于模板 managehouses.html。从数据库获取数据的代码是 def housetypes():

  cur = mysql.connection.cursor()
    try:
      cur.execute("SELECT * FROM housetypes")
      housetypes = cur.fetchall()
  except MySQLdb.Error as e:
      flash(f"An error occurred: {e}", "error")
      housetypes = []
  finally:
      cur.close()
  return render_template('managehouses.html', housetypes=housetypes)

以下是我的模态体:

               <div class="modal-body">
                           <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th scope="col">Housetype ID</th>
                                        <th scope="col">Housetype Name</th>
                                        <th scope="col">Rent Amount</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for row in housetypes %}
                                    <tr>
                                        <td>{{ row['housetypesid'] }}</td>
                                        <td>{{ row['housetypename'] }}</td>
                                        <td>{{ row['rentamount'] }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>

它只显示标题,不显示数据。请帮忙

我希望数据显示在模态上。

python html css mysql flask
1个回答
0
投票

让我们尝试通过确保循环和 HTML 结构格式正确来解决在没有数据的情况下显示标题的问题。

Python

 from flask import render_template, flash import MySQLdb
 
 def housetypes():
     cur = mysql.connection.cursor()
     try:
         cur.execute("SELECT * FROM housetypes")
         housetypes = cur.fetchall()
     except MySQLdb.Error as e:
         flash(f"An error occurred: {e}", "error")
         housetypes = []
     finally:
         cur.close()
     return render_template('managehouses.html', housetypes=housetypes)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Manage Houses</title>
  <!-- Include your CSS and other head elements here -->
</head>
<body>

<!-- Your other HTML content -->

<!-- Modal -->
<div class="modal" id="houseTypesModal" tabindex="-1" role="dialog" aria-labelledby="houseTypesModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="houseTypesModalLabel">House Types</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>Housetype ID</th>
              <th>Housetype Name</th>
              <th>Rent Amount</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            {% for row in housetypes %}
            <tr>
              <td>{{ row['housetypesid'] }}</td>
              <td>{{ row['housetypename'] }}</td>
              <td>{{ row['rentamount'] }}</td>
              <td>
                <!-- Define your action buttons here, for example: -->
                <button class="btn btn-primary">Edit</button>
                <button class="btn btn-danger">Delete</button>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Include your JavaScript libraries, for example: jQuery, Bootstrap JS -->
</body>
</html>

我假设如果正确获取数据,模式中的表格现在应该显示以下内容:

户型ID |户型名称 |租金金额 |行动

1 |荷马 | 742 | 742 [编辑][删除]

2 |斯普林菲尔德 | 1000 | [编辑][删除]

...

让我们知道发生了什么。谢谢:)

© www.soinside.com 2019 - 2024. All rights reserved.