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，这取决于您如何设计CSS。您可以添加以下内容：

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

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

CSS设计可按组ID显示数据行的备用颜色

1 个答案: