javascript - 通过jinja和js循环创建不同颜色的div

我在模板中使用jinja和javascript创建了几行，每行包含100个框，其中某些框是一种颜色，另一些则是另一种颜色，具体取决于数据行中的数字。例如，如果我的电子表格中的一行包含以下内容：

year  men  women
1988  60    40

我页面上的那一行是年份，然后是60个绿色框（男性）和40个黄色框（男性）。我目前正在使用Jinja循环来执行此操作，但它只会吐出一排不同颜色的框。

{% for row in years %}

<script>
    var htmlElements = "";
    var container = document.getElementById("boxes");
    for (var i = 0; i < {{ row.men }}; i++) {
        htmlElements += '<div class="men"></div>';
    }
    for (var i = 0; i < {{ row.women }}; i++) {
        htmlElements += '<div class="women"></div>';
    }
    container.innerHTML = htmlElements;
</script>

<div class="row box-row">
    <div class="two columns">
        <p id="{{ row.id }}" class="year-text">{{ row.year }}</p>
    </div>
    <div id="boxes" class="ten columns"></div>
</div>
<div class="row">
    <div class="six columns offset-by-five">
        <a href="#" class="scrollToTop">Jump To Top</a>
    </div>
</div>

{% endfor %}

此代码会在页面上生成所有年份，但只会生成第一行不同颜色的框。我已检查以确保数据的标题行与上面的script标签中的内容匹配。我不确定我是否在脚本中正确使用了jinja变量。任何帮助表示赞赏！

最佳答案

您当然可以在Jinja中完成所有操作。您可能需要进行一些调整，以使其与尚未发布的代码一起使用，但这是我想到的：

{% for row in years %}

    <div class="container">
    {% for male_boxes in row.men %}
        <div class="men"></div>
    {% endfor %}
    {% for female_boxes in row.women %}
        <div class="women"></div>
    {% endfor %}
    </div>

    <div class="row box-row">
        <div class="two columns">
            <p id="{{ row.id }}" class="year-text">{{ row.year }}</p>
        </div>
        <div class="boxes" class="ten columns"></div>
    </div>
    <div class="row">
        <div class="six columns offset-by-five">
            <a href="#" class="scrollToTop">Jump To Top</a>
        </div>
    </div>

{% endfor %}

注意：我将您的<div> id之一更改为class，因为您在循环内创建了它，这将使用id创建多个元素，并且在HTML中不起作用。提防那些。

关于javascript - 通过jinja和js循环创建不同颜色的div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41076887/