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");

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

jQuery仅用于父表的备用行CSS

2 个答案:

DEMO