How to create a recursive table in HTML

Question

i have the following piece of code:

                <h3 style="margin: 0px; margin-bottom: 20px;">Click the checkboxes for more subscriptions</h3>
                {% for keyword in keyword_list %}
                    {% if keyword.keyword_name == userprofile.keywords_subscribed  %}
                        <input type="checkbox" disabled="disabled" name="keywords" value="keywords"/>
                        {{keyword.keyword_name}}
                        <br />
                    {% else %}
                        <input type="checkbox" name="cb" value="keywords"  />
                        {{keyword.keyword_name}}
                        <br />
                    {% endif %}
                {% endfor %}

Right now it just displays a checkbox of keywords one by one. I was wondering if there is anyway which i can turn this into a table form.

I need the table to be dynamic because the number of keywords in the list would keep on expanding.

I've tried to come up with some solutions with using the keyword id that is stored in the database but that's a tedious method.

Any other efficient method that i may have missed out?

This is a mixture of django and html so don't be alarmed by the unique terms. :p

Thanks for helping! :D

possible duplicate of stackoverflow.com/q/16194247/1914034

Below the Radar
– Below the Radar

2015-12-18 19:33:09 +00:00
Commented Dec 18, 2015 at 19:33 — Below the Radar
– Below the Radar, Commented Dec 18, 2015 at 19:33

Wojciech Żółtak · Accepted Answer · 2012-02-25 09:35:18Z

3

Why not just do it explicitely?

            <h3 style="margin: 0px; margin-bottom: 20px;">Click the checkboxes for more subscriptions</h3>
            <table>
              <tbody>
                {% for keyword in keyword_list %}
                  <tr>
                    <td>
                      {% if keyword.keyword_name == userprofile.keywords_subscribed  %}
                        <input type="checkbox" disabled="disabled" name="keywords" value="keywords"/>
                      {% else %}
                        <input type="checkbox" name="cb" value="keywords"  />
                      {% endif %}
                      {{keyword.keyword_name}}
                    </td>
                  </tr>
                {% endfor %}
               </tbody>
            </table>

If you want the table to grow horizontally just move <tr></tr> tags outside the outer for.

For further deployment you may want to use Django Forms, with custom templates packed into a FormsSet.

EDIT:

If you want a N-column layout (3-columns for example), you can access a forloop.counter variable:

            <h3 style="margin: 0px; margin-bottom: 20px;">Click the checkboxes for more subscriptions</h3>
            <table>
              <tbody>
                {% for keyword in keyword_list %}
                  {% if forloop.counter|divisibleby:"3" %}
                    <tr>
                  {% endif}
                    <td>
                      {% if keyword.keyword_name == userprofile.keywords_subscribed  %}
                        <input type="checkbox" disabled="disabled" name="keywords" value="keywords"/>
                      {% else %}
                        <input type="checkbox" name="cb" value="keywords"  />
                      {% endif %}
                      {{keyword.keyword_name}}
                    </td>
                  {% if forloop.counter|add:"1"|divisibleby:"3" %}
                    </tr>
                  {% endif}
                {% endfor %}
               </tbody>
            </table>

Code above works only when the length of a list of keywords is divisible by three, but it illustrates the general idea. To fix thath you can for example append empty items to the list, to make it satisfy that condition. A custom filter which do so may be a good idea.

If you want something more sophisticated it's again a play with if conditions and forloop variables.

For something very sophisticated it may be better to write a custom filter or a template tag, in order to make your template file clearer.

edited Feb 25, 2012 at 9:35

answered Feb 25, 2012 at 8:39

Wojciech Żółtak

9507 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stanwin Siow Over a year ago

thatnks zoltak, but what i really want is to display the list into let's say three columns. coding it explicitly will work if i want my list to be displayed in one column only.

Stanwin Siow Over a year ago

to add on, like if the program displays out 10 keywords in the first column, it will automatically display the list of keywords in the next column. is that even possible?

Stanwin Siow Over a year ago

thank you so much. I've now got a better understanding of how tables work. Thanks again! :D

Collectives™ on Stack Overflow

How to create a recursive table in HTML

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related