jQuery 备用行 CSS 仅适用于父表答案

【问题标题】：jQuery alternate row CSS for parent table onlyjQuery 备用行 CSS 仅适用于父表
【发布时间】：2018-09-28 16:47:52
【问题描述】：

我有一个包含很多隐藏元素的表单，这些元素用表格格式化。在显示隐藏元素后，我需要能够使用 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 只更改父表上的行？

【问题讨论】：

标签： jquery css html-table

【解决方案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");

【讨论】：

你知道为什么这个或杰的答案都不起作用吗？演示都可以工作，但在我的网站上都不能工作。我在 googleapis.com 的页眉中包含 jquery 1.10.2。原始代码有效，但如果我添加直接子选择器，它将停止工作。
您的 html 与您发布的内容一模一样吗？也许你用或类似的东西包裹了？

【解决方案2】：

这是一种方法 -

$(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/

【讨论】：