仅用于父表的jQuery备用行CSS

我有一个表格，里面有很多隐藏的元素，用表格格式化。我需要能够重新交替表行颜色与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> 

$（文档）.ready（函数（）{
$（'input:radio[name=“ck”]”）。更改（函数（）{
如果（$（“#ck3”）是（“：checked”）{
$（“#隐藏行”）.show（）；
}否则{
$（“#隐藏行”）.hide（）；
} 
$（“#父表tr”）.removeClass（'form#odd#row'）；
$（“#父表tr”）.removeClass（'form#u偶#u行'）；
$（“#父表tr:odd”）.addClass（“form#odd#row”）；
$（“#父表tr:even”）.addClass（“form#even#row”）；
}) 
}); 

发生的情况是，带有复选框的表与父表交替获得行。如何告诉jQuery只更改父表上的行

只需使用如下所示的直接子选择器：

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

---

这里有一种方法：

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

---

你知道为什么这个或杰伊的答案都不起作用吗？演示都可以，但在我的网站上都不行。我将jquery 1.10.2包含在googleapis.com的页面标题中。原来的代码可以工作，但是如果我添加直接子选择器，它就会停止工作。你的html看起来和你发布的完全一样吗？也许是你用什么东西包起来的？