CODEWITHSUNDEEP
javascriptdjangodjango-templates
mb52089
mb52089

Reputation: 872

Django newbie - Need help hiding parts of a table that is built dynamically

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>

Upvotes: 0

Views: 998

Answers (1)

ib.lundgren
ib.lundgren

Reputation: 1544

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

Upvotes: 1

Related Questions