Home/ Questions/Q 7098017
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T11:00:17+00:00

I need to hide/show parts of a table that is dynamically built, as shown

  • 0

I need to hide/show parts of a table that is dynamically built, as shown below. I want to show or hide the table with class=”newtable” if “checkbox” is unchecked. However, I only want to hide the instance of it that corresponds to that iteration of the loop. So if the checkbox is checked, the user sees the extra information and has to fill it in. If not, they don’t see it and have no further action. This logic would be applied for each row of the table. I can see how to use javascript to hide ALL instances of “newtable”, but I only want to hide those that correspond to “checkbox” being checked. Any help is greatly appreciated.

By the way, I had to build this “form” the long way because my variables come from different models. Couldn’t see any way to use a django form, model form, or formset to accomplish. Thanks!

<table>
<tr>
{% for x,y,z in stuff%}
    <td>{{ x.foo }}</td>
    <td>{% for item in y %}
        <input type="checkbox" name="stuff.{{ item.id }}" class="item" value="True" checked/> {{ item }}<br />        
    {%  endfor %}
    </td>
    </tr>
    <tr><td align=center colspan="5">
    <table class="newtable"  border=1>
    <tr><td>
    <input type="radio" name="pref_id{{ z.id }}"  value="1" checked> blah<br>

{%  endfor %}
</td>
</tr>
</table>
</tr>
    {% endfor %}

</table>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can easily hide all checked checkboxes under the table .newtable using jQuery.

    <!DOCTYPE html>
<html>
<head>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
   </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".newtable input[type=checkbox]:checked").hide();
        });
    </script>
</head>
<body>
    <table class="newtable">
        <tr><td><input type="checkbox" checked/></tr>
        <tr><td><input type="checkbox"></tr>
    </table>
</body>

    If you rather would have had the entire row hidden you could use

    $(".newtable input[type=checkbox]:checked").parent().parent().hide()

    Alternatively you could hide them when generating the form, assuming you are setting some check boxes to checked depending on item.checked

    {% if item.checked %}
    <input type="checkbox" checked style="display:none" ..../>      
{% else %}
    <input type="checkbox"  ..../>      
{% endif %}
    • 0