仅在嵌套的顶级表上使用tr:nth-​​child(单数)和tr:nth-​​child(偶数)选择器

时间:2015-03-18 15:52:50

标签: php html css pseudo-element

我想要一张斑马条纹桌 数据从数据库中提取,每个实例都创建一个新表 我想要<table>级别的斑马条纹。这意味着每个其他<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 个答案:

答案 0 :(得分:1)

如果你将foreach循环更改为这样的for循环:

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

然后你可以通过测试$i % 2 == 0来判断当前行是偶数还是奇数。如果评估结果为true,则添加“偶数”。类;否则添加一个“奇怪的”&#39;类。

答案 1 :(得分:0)

如果您不想将更改传播到子表,您还可以对子项强制执行相同的颜色:

.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>级别是什么,因为你有嵌套表。