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

Question

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

year  men  women
1988  60    40

我页面上的那一行是年份，然后是 60 个绿色框（男性数量）和 40 个黄色框（男性数量）。我目前正在使用 jinja 循环执行此操作，但它只会吐出一行 different-colored 个框。

{% 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 %}

此代码会生成页面上的所有年份，但只会生成 different-colored 框的 第一行 行。我已经检查以确保我的数据的 header 行与上面脚本标记中的内容相匹配。我不确定我是否在脚本中正确使用了 jinja 变量。感谢您的帮助！

Answer 1

你当然可以在神社中做到这一切。您可能需要稍微调整一下以使其适用于您尚未发布的代码，但这是我想出的：

{% 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，因为您是在循环内创建它，这会创建多个带有 [=12 的元素=]，这在 HTML 中不起作用。当心这些。

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

Create divs of different colors through a loop with jinja and js

javascript

html

jinja2

data-visualization

templating