CSS design to show alternate color for rows of data by group ID

Question

I have created a web application that shows a list of data from the database that shows like this

Instead of the same color for each row of data. I like the CSS to able to show different alternate colors for rows of data by group ID which look like below. How can i achieve that?

This is my CSS code:

.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 and HTML code for generating the rows of data

<?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

Like what I have said in the comments above, alternatively, you can group the array first before presenting, so that you know which row belong to what group.

In this case, just use and group them via 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
    );
}

Basically what this line does is push all the batches in the same group:

$grouped_trips[$tripid][]
                // ^ 

So this should yield something in this fashion:

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
        )
    )
)

Now you have a clear and grouped structure. After that its just a matter of presenting it:

Here's the full code and try to fit it in:

<?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; ?>

Now for the CSS, its up to your imagination on how to design it. You can add a little bit of:

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

Just mix and match some of the codes above since I can't test it all. But you get the idea. This should put you in the track.