Question

我想使用jquery遍历通过render_template传递给模板的flask数据库查询结果，并将数据逐行添加到html表中。我无法找出合适的jquery命令来使其正常工作！当我运行代码时，它不会引发任何错误，它只会显示一个空表。 db表中有2条记录。

数据库模型：

mockStatic(ServiceSubscriptionLocalServiceUtil.class);

烧瓶视图：

class Cust(db.Model):
    __tablename__ = 'custs'
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(50), index=True, nullable=False)
    age = db.Column(db.Integer, nullable=False)

模板：

@home.route('/')
def homepage():
    custs = Cust.query.all()
    return render_template('home/index.html', title="Home", custs=custs)

但是如果我将脚本运行为：

<div class="container-fluid">
  <table class="table" id="table1">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>  
    </thead>
    <tbody>
      <tr></tr>
    </tbody>
  </table>
</div>

<script type="text/javascript">

  $(function() {
    var i = 0;
    while (i < '{{ custs|length }}') {
        var name = custs[i].name;
        var age = custs[i].age;
        $('#table1 > tbody:last-child').append('<tr><td>' + name + '</td><td>' + age + '</td></tr>');
        i++;
    } 
});

</script>

我的表将填充第一条记录！

好，对于其他可能遇到此问题的人，这是我的做法！

$(function() {
            var name = custs[0].name;
            var age = custs[0].age;
            $('#table1 > tbody:last-child').append('<tr><td>' + name + '</td><td>' + age + '</td></tr>');
    });

它现在遍历查询变量并将数据正确加载到表中。

感谢@Kata Csortos，它的回答很有效！

Answer 1

如何遍历像这样的客户：

<script type="text/javascript">

  $(function() {
    for (const cust of custs) {
        const name = cust.name;
        const age = cust.age;
        $('#table1 > tbody:last-child').append('<tr><td>' + name + '</td><td>' + age + '</td></tr>');
    } 
});

</script>

或者将后缀的长度作为变量传递给jinja，并使用for循环遍历后缀的元素。

jQuery遍历传递到模板的烧瓶数据

1 个答案: