CODEWITHSUNDEEP
jquerycsshtml-table
squaredog
squaredog

Reputation: 23

jQuery alternate row CSS for parent table only

I've got a form with a lot of hidden elements formatted with tables. I need to be able to re-alternate the table row colors with CSS after a hidden element is shown. I've gotten the this to work with jQuery, however, when re-adding the CSS class it is also alternating classes for nested tables as well. What command would keep this from happening? Code example below:

<table id='parent-table'>
    <tr class='form_odd_row'>
        <td><label for='f1'>On/Off</label></td>
        <td><table id='chkbox-table'>
                <tr>
                    <td><label><input type='radio' name='ck' value='1' id='ck1'> On</td>
                </tr>
                <tr>
                    <td><label><input type='radio' name='ck' value='2' id='ck2'> Off</td>
                </tr>
                <tr>
                    <td><label><input type='radio' name='ck' value='3' id='ck3'> N/A</td>
                </tr>    
            </table>
        </td>
    </tr>
    <tr class='form_even_row'>
        <td><label for='n1'>Name</label></td>
        <td><input type='text' name='name' value=''></td>
    </tr>
    <tr  class='form_odd_row' id='hidden-row'>
        <td><label for='h'>Address</label></td>
        <td><input type='text' name='address' value=''></td>
    </tr>
</table>

jQuery - 

<script type="text/javascript"> 
    $(document).ready(function(){ 
        $('input:radio[name="ck"]').change(function(){ 
            if($("#ck3").is(":checked")){ 
                $("#hidden-row").show(); 
            } else { 
                $("#hidden-row").hide(); 
            } 
            $("#parent-table tr").removeClass('form_odd_row'); 
            $("#parent-table tr").removeClass('form_even_row'); 
            $("#parent-table tr:odd").addClass("form_odd_row"); 
            $("#parent-table tr:even").addClass("form_even_row"); 
        }) 
    }); 
</script>

What is happening is the table which has the checkboxes are getting alternating rows along with the parent table. How do you tell jQuery to only change rows on the parent table?

Upvotes: 0

Views: 550

Answers (2)

Jay Blanchard
Jay Blanchard

Reputation: 34416

Here is one way to do it - 

$(document).ready(function(){ 
    $('input:radio[name="ck"]').change(function(){ 
        if($("#ck3").is(":checked")){ 
            $("#hidden-row").show(); 
        } else { 
            $("#hidden-row").hide(); 
        } 
        $(this).parent('table tr').removeClass('form_odd_row'); 
        $(this).parent('table tr').removeClass('form_even_row'); 
        $(this).parent('table tr:odd').addClass("form_odd_row"); 
        $(this).parent('table tr:even').addClass("form_even_row"); 
    }) 
});

http://jsfiddle.net/W35Y7/1/

Upvotes: 0

Tomer
Tomer

Reputation: 17930

DEMO

just use a direct child selector like this:

$("#parent-table > tr").removeClass('form_odd_row'); 
$("#parent-table > tr").removeClass('form_even_row'); 
$("#parent-table > tr:odd").addClass("form_odd_row"); 
$("#parent-table > tr:even").addClass("form_even_row");

Upvotes: 2

Related Questions