创建具有可变长度的HTML表格(在Flask中首选)

huangapple go评论71阅读模式
英文:

Html create table with varying length (preferred in flask)

问题

我想从数据库中获取数据,并将其导入到网站上的表格中。假设 SQL 数据库中有 50 行数据,那么表格中必须有 50 个表格行。但是,当我尝试创建表格时,必须通过手动添加每一行和列的标签来完成。那么,我应该添加数以千计的行,并通过控制它们的可见性来实现吗?我目前使用 Flask,但如果 Flask 无法实现这一目标,也可以接受其他方法。

英文:

I want to get data from a database and import it into table in a website. Let's say there are 50 rows in sql db. then there must be 50 table rows in the table. But when I try to create a table, i must add each rows and cols by tags by manual. So should i add tens of thsounds rows and make this happen by controlling their visibility? I currently use flask but if there is no way to achieve it by flask, other ways are accepted too.

答案1

得分: 1

在Flask中,您可以基于来自SQL数据库的数据动态生成长度可变的HTML表格。您无需手动创建成千上万的行并控制它们的可见性。相反,您可以使用集成到Flask中的模板引擎来轻松实现这一点。
希望这对您有所帮助。

从您的SQL数据库中检索数据:使用Flask的数据库集成来从数据库中获取数据。

将数据传递给模板:在您的Flask路由中,将从数据库检索到的数据作为变量传递给HTML模板。

使用模板:在您的HTML模板中,使用语法来遍历数据并动态生成表格行和单元格。

from flask import Flask, render_template

app = Flask(__name__)

# 用您的数据库连接和查询代码替换此部分以获取数据
# 为演示目的,假设您已将数据获取到'rows'变量中
rows = [
    {'id': 1, 'name': 'John', 'age': 25},
    {'id': 2, 'name': 'Jane', 'age': 30},
    # 根据需要添加更多行
]

@app.route('/')
def index():
    return render_template('table_template.html', rows=rows)

if __name__ == '__main__':
    app.run(debug=True)

HTML文件

<!DOCTYPE html>
<html>
<head>
    <title>动态表格</title>
    <style>
        /* 为表格添加边框 */
        table {
            border-collapse: collapse;
            width: 100%;
            border: 1px solid black;
        }

        /* 为标题行添加粗体字体样式 */
        th {
            font-weight: bold;
        }

        /* 为表格单元格添加边框(可选) */
        td, th {
            border: 1px solid black;
            padding: 8px;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            {% for row in rows %}
                <tr>
                    <td>{{ row.id }}</td>
                    <td>{{ row.name }}</td>
                    <td>{{ row.age }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</body>
</html>
英文:

In Flask, you can dynamically generate an HTML table with varying length based on the data from your SQL database. You don't need to manually create thousands of rows and control their visibility. Instead, you can use a template engine, which is integrated into Flask, to achieve this easily.
Hope this will help you

Retrieve the data from your SQL database: Use Flask's database integration to fetch the data from your database.

Pass the data to the template: In your Flask route, pass the data retrieved from the database as a variable to the HTML template.

Use templating: In your HTML template, use syntax to loop through the data and dynamically generate the table rows and cells.

from flask import Flask, render_template

app = Flask(__name__)

# Replace this with your database connection and query code to fetch data
# For demonstration purposes, let&#39;s assume you have fetched data in the &#39;rows&#39; variable
rows = [
    {&#39;id&#39;: 1, &#39;name&#39;: &#39;John&#39;, &#39;age&#39;: 25},
    {&#39;id&#39;: 2, &#39;name&#39;: &#39;Jane&#39;, &#39;age&#39;: 30},
    # Add more rows as needed
]

@app.route(&#39;/&#39;)
def index():
    return render_template(&#39;table_template.html&#39;, rows=rows)

if __name__ == &#39;__main__&#39;:
    app.run(debug=True)

HTML FILE

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Dynamic Table&lt;/title&gt;
    &lt;style&gt;
        /* Add border to the table */
        table {
            border-collapse: collapse;
            width: 100%;
            border: 1px solid black;
        }

        /* Add bold font style to the header row */
        th {
            font-weight: bold;
        }

        /* Add border to table cells (optional) */
        td, th {
            border: 1px solid black;
            padding: 8px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;table&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;ID&lt;/th&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Age&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
            {% for row in rows %}
                &lt;tr&gt;
                    &lt;td&gt;{{ row.id }}&lt;/td&gt;
                    &lt;td&gt;{{ row.name }}&lt;/td&gt;
                    &lt;td&gt;{{ row.age }}&lt;/td&gt;
                &lt;/tr&gt;
            {% endfor %}
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

huangapple
  • 本文由 发表于 2023年7月31日 19:43:32
  • 转载请务必保留本文链接:https://go.coder-hub.com/76803277.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定