Forloop counter

forloop.counter is a built-in variable in Django that you can use in your templates to keep track of the current iteration number when looping over a collection of items. It starts at 1 and increments by 1 for each iteration.

It is a very simple but powerful tool in Django. Here are just three ideas of how it can be used, but there are many more ways it can come in handy.

Add numbers t a list of items:

<ul>
    {% for item in items %}
        <li>{{ forloop.counter }}. {{ item }}</li>
    {% endfor %}
</ul>

Change the colour of every second row:

{% for item in items %}
    <tr {% if forloop.counter|divisibleby:2 %}style="background-color: #f2f2f2;"{% endif %}>
        <td>{{ item }}</td>
    </tr>
{% endfor %}

Assign a separate popup for each entry:

{% for specie in species %}
    <a type="button" data-bs-toggle="modal" data-bs-target="#_full_note_{{ forloop.counter }}Modal" style="text-decoration: none;">{{ specie.species_description|slice:50 }}</a>

    <div class="modal fade" id="_full_note_{{ forloop.counter }}Modal" tabindex="-1" aria-labelledby="_full_note_{{ forloop.counter }}ModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title fs-5" id="_full_note_{{ forloop.counter }}ModalLabel">Description</h4>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              {{ specie.species_description }}
            </div>
          </div>
        </div>
      </div>
{% endfor %}

---

Fossils app code with forloop examples:

{% if species %}
<table class="table table-hover table-sm" style="font-size: small;">
    <thead>
        <tr>
            <th class="h3 text-center p-3" scope="col" colspan="4">Species</th>
        </tr>
        <tr>
        <th scope="col">Image</th>
        <th scope="col">Status</th>
        <th scope="col">Species</th>
        <th scope="col">Description</th>
        </tr>
    </thead>
    <tbody>
    {% for specie in species %}
        <tr {% if forloop.counter|divisibleby:2 %} style="background: rgb(221, 221, 221);"{% endif %}>
        <td>{% if specie.species_image %} <img src="{{ specie.species_image.url }}" alt="" style="max-width: 40px; max-height: 40px;">{% endif %}</td>
        <td><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="{% if specie.species_is_archived %}red{% else %}green{% endif %}" class="bi bi-circle-fill" viewBox="0 0 16 16"><circle cx="8" cy="8" r="8"/></svg></td>
        <td>{{ forloop.counter }} - <a href="{% url 'species-selected' specie.id %}" style="text-decoration: none;">{{ specie.species_name }}</a></td>
        <td><a type="button" data-bs-toggle="modal" data-bs-target="#_full_note_{{ forloop.counter }}Modal" style="text-decoration: none;">{{ specie.species_description|slice:50 }}</a></td>
        </tr>

        <div class="modal fade" id="_full_note_{{ forloop.counter }}Modal" tabindex="-1" aria-labelledby="_full_note_{{ forloop.counter }}ModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title fs-5" id="_full_note_{{ forloop.counter }}ModalLabel">Description</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {{ specie.species_description }}
            </div>
            </div>
        </div>
        </div>
    {% endfor %}
    </tbody>
    </table>
{% endif %}