php - 按组 ID 显示数据行的替代颜色的 CSS 设计

Question

我创建了一个 Web 应用程序，它显示数据库中的数据列表，如下所示

而不是每行数据都使用相同的颜色。我喜欢 CSS 能够按组 ID 为数据行显示不同的替代颜色，如下所示。我怎样才能做到这一点？

这是我的 CSS 代码:

.datarows{
    background-color: #00BFFF;
    color: #f7f7f7;
    border-style: solid;
    width: 100%;
    height: 100%;
    padding:2px;    
}

.datarows a{
    cursor: pointer;
    color: #FFFFFF;
    font: 0.9em arial, sans-serif;
    font-weight: bold;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    text-decoration: none;
    display: inline-block;
    width: 100%;
}

.datarows .tripid{
    background-color: #000080;
    text-align: center;
    color: #FFFFFF;
    display: inline-block;
    padding: 6px;
}

.datarows .time{
    text-align: center;
    color: #000000;
    background-color: #FFA500;
    display: inline-block;
    padding: 6px;
}

.datarows a:hover, a:active {
    background-color: #1E90FF;
}

用于生成数据行的 PHP 和 HTML 代码

<?php       
   $curdate = date("Y-m-d");

    $query_curdate = "SELECT a.trip_id, b.start_time, b.end_time, c.activity_name FROM TRIP a JOIN ACTIVITY b ON a.trip_no = b.trip_no 
                          JOIN ACTIVITY_TYPE c ON b.activity_id = c.activity_id WHERE a.trip_date = ?";
        $params_curdate = array($curdate);
        $stmt_curdate = sqlsrv_query($conn, $query_curdate, $params_curdate);

                                while( $row1 = sqlsrv_fetch_array( $stmt_1curdate, SQLSRV_FETCH_NUMERIC) ) {

                                    $tripid_1 = $row1[0];
                                    $starttime_1 = $row1[1]->format('h:i');
                                    $endtime_1 = $row1[2]->format('h:i');
                                    $activitytype_1 = $row1[3];
                                ?>

                                <div class="datarows"><a href="">
                                <div class="tripid"><?php echo $tripid_1; ?></div> 
                                <div class="time"><?php echo $starttime_1." - ".$endtime_1; ?></div>
                                <?php echo $activitytype_1."<br/><br/>"; ?>
                                </a></div>

                                <?php               
                                }
                                ?>

Answer 1

就像我在上面的评论中所说的，或者，您可以在呈现之前先对数组进行分组，以便您知道哪一行属于哪一组。

在这种情况下，只需使用 trip_id 并对其进行分组:

$grouped_trips = array(); // initialize container
while ($row1 = sqlsrv_fetch_array($stmt_1curdate, SQLSRV_FETCH_NUMERIC)) {
    $tripid_1 = $row1[0];
    $starttime_1 = $row1[1]->format('h:i');
    $endtime_1 = $row1[2]->format('h:i');
    $activitytype_1 = $row1[3];
    // push them inside
    $grouped_trips[$tripid_1][] = array(
        'trip_id' => $tripid_1,
        'start_time' => $starttime_1,
        'end_time' => $endtime_1,
        'activity_type' => $activitytype_1
    );
}

基本上这条线所做的是推送同一组中的所有批处理:

$grouped_trips[$tripid][]
                // ^ 

所以这应该以这种方式产生一些东西:

Array (
    [35KH1] => Array (
        [0] => Array(
            [trip_id] => 35KH3
            [start_time] => 06:00
            [end_time] => 06:10
            [activity_type] => (D) NORMAL DREDGING
        )

        [1] => Array(
            [trip_id] => 35KH3
            [start_time] => 06:10
            [end_time] => 06:15
            [activity_type] => (M) SHIFTING / REPOSITIONING
        )
    )

    [35KH4] => Array (
        [0] => Array(
            [trip_id] => 35KH4
            [start_time] => 06:45
            [end_time] => 07:10
            [activity_type] => (D) NORMAL DREDGING
        )

        [1] => Array(
            [trip_id] => 35KH4
            [start_time] => 07:10
            [end_time] => 08:00
            [activity_type] => (M) SHIFTING / REPOSITIONING
        )
    )
)

现在您有了一个清晰的分组结构。之后就是展示它了:

这是完整的代码并尝试将其放入:

<?php

$curdate = date('Y-m-d');
$query_curdate = "
    SELECT a.trip_id, b.start_time, b.end_time, c.activity_name 
        FROM TRIP a 
        JOIN ACTIVITY b ON a.trip_no = b.trip_no 
        JOIN ACTIVITY_TYPE c ON b.activity_id = c.activity_id 
    WHERE a.trip_date = ?
";
$params_curdate = array($curdate);
$stmt_curdate = sqlsrv_query($conn, $query_curdate, $params_curdate);

$grouped_trips = array();
while ($row1 = sqlsrv_fetch_array($stmt_1curdate, SQLSRV_FETCH_NUMERIC)) {
    $tripid_1 = $row1[0];
    $starttime_1 = $row1[1]->format('h:i');
    $endtime_1 = $row1[2]->format('h:i');
    $activitytype_1 = $row1[3];

    $grouped_trips[$tripid_1][] = array(
        'trip_id' => $tripid_1,
        'start_time' => $starttime_1,
        'end_time' => $endtime_1,
        'activity_type' => $activitytype_1
    );
}
?>

<?php foreach ($grouped_trips as $trip_id => $groups): ?>
<div class="group"> <!-- add your CSS to each 35KH# group -->
    <div class="tripid"><?php echo $trip_id; ?></div> 
    <?php foreach ($groups as $group): ?>
    <div class="datarows">
        <a href="#" title="">
            <div class="time">
                <span><?php echo $group['start_time']; ?></span>
                <span> - </span>
                <span><?php echo $group['end_time']; ?></span>
            </div>
            <span><?php echo $group['activity_type']; ?></span>
            <br/><br/>
        </a>
    </div>
    <?php endforeach; ?>
</div>
<?php endforeach; ?>

现在是 CSS，就看你怎么设计了。您可以添加一些:

.group:nth-child(odd){
    background:#ccc;
}
.group:nth-child(even){
    background:#222;
}

只需混合并匹配上面的一些代码，因为我无法测试所有代码。但是你明白了。这应该会让您步入正轨。