我怎样才能将php集成到html表中

时间:2015-06-13 19:04:04

标签: php html css

我的朋友为我的桌子做了新的设计,但我无法将旧的表格php代码整合到新的设计中。我该怎么做?感谢

这是我的旧桌子;

<table align="center" width="1200" height="370" cellpadding="7">
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Sex</th>
                <th>Country</th>
                <th>Age</th>
                <th>Twitter</th>
                <th>Instagram</th>
                <th>Snapchat</th>
                <th>Details</th>
            </tr>

            <?php
            foreach($db->query('SELECT * FROM uyeler ORDER BY RAND()LIMIT 20') as $row) {
                    echo "<tr><td>" .$row['id'] . "</td>";
                    echo "<td>" .$row['fname'] . "</td>";
                    echo "<td>" .$row['sex'] . "</td>";
                    echo "<td>" .$row['country'] . "</td>";
                    echo "<td>" .$row['age'] . "</td>";
                    echo "<td>" .$row['twitter'] . "</td>";
                    echo "<td>" .$row['instagram'] . "</td>";
                    echo "<td>" .$row['snapchat'] . "</td>";
                    echo ('<td><a href="details.php?id=' .$row['id'] . '" title="Panel">Details</a></td>');
                    echo "</tr>";
                }
            ?>

            </table>

这是新设计,(一线暗,一线黑......)

<table class="table table-striped">

                                <!--Table Header -->
                                    <tr>
                                        <th class="t_head">ID</th>
                                        <th class="t_head">NAME</th>
                                        <th class="t_head">SEX</th>
                                        <th class="t_head">COUNTRY</th>
                                        <th class="t_head">AGE</th>
                                        <th class="t_head">TWITTER</th>
                                        <th class="t_head">INSTERGRAM</th>
                                        <th class="t_head">SNAPCHAT</th>
                                        <th class="t_head">DETAILS</th>
                                    </tr>

                                <!--Row 01 -->  
                                    <tr class="t_light">
                                        <td>14</td>
                                        <td>Taha</td>
                                        <td>Male</td>
                                        <td>Russia</td>
                                        <td>2000</td>
                                        <td>Tahains</td>
                                        <td>Male</td>
                                        <td>Male</td>
                                        <td><a href="#">Details</a></td>
                                    </tr>

                                <!--Row 02 -->  
                                    <tr class="t_dark">
                                        <td>14</td>
                                        <td>Taha</td>
                                        <td>Male</td>
                                        <td>Russia</td>
                                        <td>2000</td>
                                        <td>Tahains</td>
                                        <td>Male</td>
                                        <td>Male</td>
                                        <td><a href="#">Details</a></td>
                                    </tr>

                                <!--Row 03 -->  
                                    <tr class="t_light">
                                        <td>14</td>
                                        <td>Taha</td>
                                        <td>Male</td>
                                        <td>Russia</td>
                                        <td>2000</td>
                                        <td>Tahains</td>
                                        <td>Male</td>
                                        <td>Male</td>
                                        <td><a href="#">Details</a></td>
                                    </tr>

                                <!--Row 04 -->  
                                    <tr class="t_dark">
                                        <td>14</td>
                                        <td>Taha</td>
                                        <td>Male</td>
                                        <td>Russia</td>
                                        <td>2000</td>
                                        <td>Tahains</td>
                                        <td>Male</td>
                                        <td>Male</td>
                                        <td><a href="#">Details</a></td>
                                    </tr>

                                <!--Row 05 -->  
                                    <tr class="t_light">
                                        <td>14</td>
                                        <td>Taha</td>
                                        <td>Male</td>
                                        <td>Russia</td>
                                        <td>2000</td>
                                        <td>Tahains</td>
                                        <td>Male</td>
                                        <td>Male</td>
                                        <td><a href="#">Details</a></td>
                                    </tr>

                                </table>

css文件的一部分;

.table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th
{
    background: #e0dfdf;
}

.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td
{
    background: #f7f7f7;
}

2 个答案:

答案 0 :(得分:1)

您可以按照以下方式执行此操作

<table align="center" width="1200" height="370" cellpadding="7">
    <tr>
        <th class="t_head">ID</th>
        <th class="t_head">NAME</th>
        <th class="t_head">SEX</th>
        <th class="t_head">COUNTRY</th>
        <th class="t_head">AGE</th>
        <th class="t_head">TWITTER</th>
        <th class="t_head">INSTERGRAM</th>
        <th class="t_head">SNAPCHAT</th>
        <th class="t_head">DETAILS</th>
    </tr>
    <?php
    $i=1;
    foreach($db->query('SELECT * FROM uyeler ORDER BY RAND()LIMIT 20') as $row) {
        if ($i%2!=0)
            $class="t_light";
        else
            $class="t_dark";
        echo "<tr class='".$class."'><td>" .$row['id'] . "</td>";
        echo "<td>" .$row['fname'] . "</td>";
        echo "<td>" .$row['sex'] . "</td>";
        echo "<td>" .$row['country'] . "</td>";
        echo "<td>" .$row['age'] . "</td>";
        echo "<td>" .$row['twitter'] . "</td>";
        echo "<td>" .$row['instagram'] . "</td>";
        echo "<td>" .$row['snapchat'] . "</td>";
        echo ('<td><a href="details.php?id=' .$row['id'] . '" title="Panel">Details</a></td>');
        echo "</tr>";
        $i++;
    }
    ?>
</table>

我所做的是,在每个循环中,我检查每个迭代是否是奇数或偶数并适当地应用该类。

我认为,您正在使用这样的代码来不同地设置备用行的样式。这可以通过CSS选择器完成。无需为rach行添加单独的类。

在纯CSS中,您可以执行以下操作:

//for even
tr:nth-child(even) {
    background-color: #000000;
}
//for odd
tr:nth-child(odd) {
    background-color: #FFFFFF;
}

答案 1 :(得分:0)

这些工作通常是通过模数运算符%来完成的,它可以帮助你得到除法的余数。
在你的情况下,你可以找到偶数和行的行这很奇怪。

  

$ a%$ b $ a的模数余数除以$ b。

来源:http://php.net/en/language.operators.arithmetic

<?php
    $i = 0;
    foreach($db->query('SELECT * FROM uyeler ORDER BY RAND()LIMIT 20') as $row) {
        echo '<tr class="'.($i%2 == 0 ? 't_light' : 't_dark').'">';
        echo "<td>" .$row['id'] . "</td>";
            // the other columns comes here
        echo "</tr>";
        $i++;
    }
?>