Question

how do i achieve the above result with for / foreach loop [Picture 2]? ive googled around but could not find the answer what i want…

$name = array('D1','D2','D3' );

foreach ( $name as $k=> $v ) {
  $openTime3 = strtotime('10:00');
  $closeTime3 =  strtotime('15:00');

  echo '<div class="col"> <span class="header">'.$v.'</span>';

  while ( $openTime3 < $closeTime3 ) {
     if ( ( date('Hi', $openTime3) > '1030'  && date('Hi', $openTime3) < '1130' ) && $k == 1) {
        echo '<span class="body "><a href="#" class="unconfirmed">B</a></span>';
        break; /* ???? */
        // try to use continue or break, and it didnt work i above result.
     } else {
        echo '<span class="body"><a href="#" class="available">AV</a></span>';
     }

     $openTime3 = strtotime('+15 minutes', $openTime3);
  }

  echo '</div>';
}

css code:

.col { text-align: center; width: auto; float: left; }
.col > span { display: block; }
.col > span > a {height: 26px;line-height: 26px;display: block; padding: 0 10px; }
.col > span > .available { background: #D6F2F4; }

above code always return below result [Picture 1]:

Answer 1

I added unconfirmed style to your css with border color same as background. Use flag to toggle B

<style>
.col { text-align: center; width: auto; float: left; }
.col > span { display: block; }
.col > span > a {height: 26px;line-height: 26px;display: block; padding: 0 10px; }
.col > span > .available { background: #D6F2F4;border-style:solid;
border-width:1px;}
.col > span > .unconfirmed { background: #ffff99;border-style:solid;
border-width:1px;border-color: #ffff99;}

</style>
<?php
$name = array('D1','D2','D3' );
$flag=0;//Set flag off
foreach ( $name as $k=> $v ) {
  $openTime3 = strtotime('10:00');
  $closeTime3 =  strtotime('15:00');

  echo '<div class="col"> <span class="header">'.$v.'</span>';

  while ( $openTime3 < $closeTime3 ) {

     if ( ( date('Hi', $openTime3) > '1030'  && date('Hi', $openTime3) < '1130' ) && $k == 1) {

        if($flag==0){
        echo '<span class="body "><a href="#" class="unconfirmed"></a></span>';//Hide B
        $flag=1;Toggle flag on
        }else{
        echo '<span class="body "><a href="#" class="unconfirmed">B</a></span>';Show B
        $flag=0;Toggle flag off
        }

     } else {
        echo '<span class="body"><a href="#" class="available">AV</a></span>';
     }
     //$flag=1;
     $openTime3 = strtotime('+15 minutes', $openTime3);
  }
  echo '</div>';
}
?>