代码之家 › 专栏 › 技术社区 › Interactive

仅在嵌套的顶部表上使用tr:nth子(奇数)和tr:nh子(偶数)选择器

pseudo-element css html php

Interactive · 技术社区 · 9 年前

我想要一张斑马条纹的桌子。
数据从数据库中提取,每个实例都创建一个新表。
我想要斑马线 <table> 数量这意味着 <表> 元素获得不同的颜色。

我试图为我的 <table class="oddeven"> 但这仍然会改变每个tr。

下面是我使用的代码:

<?php
                global $wpdb;
                $sql = "SELECT * FROM $wpdb->postmeta WHERE meta_key = 'group' AND meta_value='$group'";
                $results = $wpdb->get_results($sql) or die(mysql_error());
                echo'<table cellpadding="0" cellspacing="0" border="0" width="100%">';
                    foreach( $results as $result ) 
                    {       
                        $post_id = $result->post_id;
                        $company_name = get_post_meta($post_id, 'company_name', true); 
                        $address = get_post_meta($post_id, 'address', true); 
                        $postal_code = get_post_meta($post_id, 'postal_code', true); 
                        $city = get_post_meta($post_id, 'city', true); 
                        $phone = get_post_meta($post_id, 'phone', true); 

                        echo '
                        <tr>
                            <td>
                                <table cellpadding="0" cellspacing="0" border="0" width="100%" class="oddeven">
                                    <tr>
                                        <td width="75%">
                                            <strong>'.$company_name.'</strong>
                                        </td>
                                        <td rowspan="4"><img class="table_image" src="'.get_bloginfo('template_directory').'/images/arrow.png"></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            '.$address.'
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            '.$postal_code.'  '.$city.'
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            '.$phone.'
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>';
                    }
                    echo '</table>';
            ?>

这是样式: (在键入此时,我意识到这是在tr:level上)

.oddeven tr:nth-child(odd){ 
background: #ffffff;
}

.oddeven tr:nth-child(even){
background: #000000;
}

我希望我能说清楚

2 回复 | 直到 9 年前

Hayden Schiff 9 年前

如果将foreach循环更改为for循环,如下所示:

for($i = 0; $i < count($results); $i++) {
    $result = $results[$i];
    ...

然后,您可以通过测试 $i % 2 == 0 。如果该值为true,则添加“偶数”类;否则添加“奇数”类。

Clément Malet 9 年前

如果不想将更改传播到子表,也可以在子表上强制使用相同的颜色:

.top tr:nth-child(odd) {
    background-color: red;
}   

.top tr:nth-child(odd) tr {
    background-color: red;
}

.top tr:nth-child(even) {
    background-color: yellow;
}   

.top tr:nth-child(even) tr {
    background-color: yellow;
}

我想这就是您想要的,因为您已经在嵌套表中剥离了行或者也许我搞错了,你可能需要解释一下 <table> 级别为,因为您有嵌套表。