仅在嵌套顶层表格上使用 tr:nth-child(odd) 和 tr:nth-child(even) 选择器

Question

我想要条纹斑马table。
数据是从数据库中提取的，每个实例都会创建一个新的 table.
我想要 <table> 级别的斑马条纹。这意味着每个其他 <table> 元素都有不同的颜色。

我尝试将 class 添加到我的 <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;
}

希望我说清楚

Answer 1

如果您将 foreach 循环更改为这样的 for 循环：

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

然后你可以通过测试if $i % 2 == 0来判断当前行是偶数还是奇数。如果计算结果为真，则添加 'even' class；否则添加 'odd' class.

Answer 2

如果您不想将更改传播到子表，您还可以对子表强制使用相同的颜色：

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

仅在嵌套顶层表格上使用 tr:nth-child(odd) 和 tr:nth-child(even) 选择器

Use tr:nth-child(odd) and tr:nth-child(even) selectors only on nested top tables

html

css

php

pseudo-element