仅用于父表的 jQuery 备用行 CSS

Question

我有一个表单，其中包含许多用表格格式化的隐藏元素。在显示隐藏元素后，我需要能够使用 CSS 重新交替表格行颜色。我已经将它与 jQuery 一起使用，但是，当重新添加 CSS 类时，它也会为嵌套表交替类。什么命令可以防止这种情况发生？下面的代码示例:

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

正在发生的事情是带有复选框的表与父表一起交替行。你如何告诉 jQuery 只更改父表上的行？

Answer 1

DEMO

只需像这样使用直接子选择器:

$("#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");