Подсветка первых 5 мест в таблице

221
19 марта 2018, 23:47

Есть турнирная таблица(php выводит из mysql), из которой первые 5 команд выходят в play-off нужно сделать , чтобы первые 5 команд подcвечивались цветом(любым)

echo '<table class="tournament" border="3"  >';
    echo '<tr>';
echo '<th></th>';
    echo '<th class="main_name" >Team name</th>';
   echo  '<th>Matches Played</th>';
    echo '<th>Matches Won</th>';
    echo '<th>Matches Won OT</th>';
    echo '<th>Matches Lost OT</th>';
    echo '<th>Matches Lost</th>';
    echo '<th>Goals Scored</th>';
    echo '<th>Goals Missed</th>';
     echo '<th class="team_points" >Team Points</th>';
  echo '</tr>'; 
  while ($row = mysqli_fetch_array($data)) { 
    // Display the score data

    echo '<tr>'; 
    if (is_file(GW_UPLOADPATH . $row['team_logo']) && filesize(GW_UPLOADPATH . $row['team_logo']) > 0) {
      echo '<td><img class="playerphoto" src="' . GW_UPLOADPATH . $row['team_logo'] . '" alt="Photo" /></td>';
    }
    else {
      echo '<td><img src="' . GW_UPLOADPATH . '' . '" alt="" /></td>';
    }
    echo '<td  class="team_name" >' . $row['team_name'] . '</td>';
      echo '<td> ' . $row['matches_played'] . '</td>';
        echo ' <td>' . $row['matches_won'] . '</td>';
              echo ' <td>' . $row['matches_won_ot'] . '</td>';
                echo ' <td>' . $row['matches_lost_ot'] . '</td>';
                  echo ' <td>' . $row['matches_lost'] . '</td>';
                    echo ' <td>' . $row['goals_scored'] . '</td>';
                      echo ' <td>' . $row['goals_missed'] . '</td>';
                       echo ' <td>' . $row['team_points'] . '</td>';

  }
 echo ' </tr>';
  echo '</table>'; 
Answer 1

Лучше это сделать без присвоении лишних классов

table.tournament tr:nth-child(-n+5){ 
	background: yellow; 
}
<table class="tournament"> 
		<tr> 
			<td>1</td> 
			<td>2</td> 
			<td>3</td> 
			<td>4</td> 
		</tr> 
		<tr> 
			<td>1</td> 
			<td>2</td> 
			<td>3</td> 
			<td>4</td> 
		</tr> 
		<tr> 
			<td>1</td> 
			<td>2</td> 
			<td>3</td> 
			<td>4</td> 
		</tr> 
		<tr> 
			<td>1</td> 
			<td>2</td> 
			<td>3</td> 
			<td>4</td> 
		</tr> 
		<tr> 
			<td>1</td> 
			<td>2</td> 
			<td>3</td> 
			<td>4</td> 
		</tr> 
		<tr> 
			<td>1</td> 
			<td>2</td> 
			<td>3</td> 
			<td>4</td> 
		</tr> 
		<tr> 
			<td>1</td> 
			<td>2</td> 
			<td>3</td> 
			<td>4</td> 
		</tr> 
		<tr> 
			<td>1</td> 
			<td>2</td> 
			<td>3</td> 
			<td>4</td> 
		</tr> 
	</table>

Для подсветки строк все зависимости от сортировки, нужно добавить класс строки таблицы:

echo '<table class="tournament" border="3"  >';
echo '<thead>'
echo '<tr>';
echo '<th></th>';
echo '<th class="main_name" >Team name</th>';
echo '<th>Matches Played</th>';
echo '<th>Matches Won</th>';
echo '<th>Matches Won OT</th>';
echo '<th>Matches Lost OT</th>';
echo '<th>Matches Lost</th>';
echo '<th>Goals Scored</th>';
echo '<th>Goals Missed</th>';
echo '<th class="team_points" >Team Points</th>';
echo '</tr>'; 
echo '</thead>';
echo '<tbody>';
$i = 1;
while ($row = mysqli_fetch_array($data)) { 
    // Display the score data
    if($i<=5){
        echo '<tr class="marked">';
    }else{
        echo '<tr>';
    }
    $i++;
    if (is_file(GW_UPLOADPATH . $row['team_logo']) && filesize(GW_UPLOADPATH . $row['team_logo']) > 0) {
        echo '<td><img class="playerphoto" src="' . GW_UPLOADPATH . $row['team_logo'] . '" alt="Photo" /></td>';
    }else{
        echo '<td><img src="' . GW_UPLOADPATH . '' . '" alt="" /></td>';
    }
    echo '<td  class="team_name" >' . $row['team_name'] . '</td>';
    echo '<td> ' . $row['matches_played'] . '</td>';
    echo '<td>' . $row['matches_won'] . '</td>';
    echo '<td>' . $row['matches_won_ot'] . '</td>';
    echo '<td>' . $row['matches_lost_ot'] . '</td>';
    echo '<td>' . $row['matches_lost'] . '</td>';
    echo '<td>' . $row['goals_scored'] . '</td>';
    echo '<td>' . $row['goals_missed'] . '</td>';
    echo '<td>' . $row['team_points'] . '</td>';
}
echo '</tr>';
echo '</tbody>';
echo '</table>';

В css уже прописывать стиль:

table.tournament tr.marked{
    // стиль
}
READ ALSO
Вертикальное позиционирование в CSS Grid Layout?

Вертикальное позиционирование в CSS Grid Layout?

Получилось вертикально позиционировать по центру item-4-1 во многих браузерах, за исключением IE11, вроде префиксы написал, но все равно не работает,...

251
Заливка текста фоном из пятен различных цветов

Заливка текста фоном из пятен различных цветов

Хочу на SVG красиво сделать логотип сайта

231
Как лучше поступить?

Как лучше поступить?

Как лучше поступитьМне на главный экран лэндинга нужна картинка, как лучше её задавать: Через background главного блока либо через img ?

218
Сделать по центру

Сделать по центру

Приветствую! Как не пробовал сделать по центру - не получается, пробовал элементарными способами, думаю спрашивать не нужно какимиСсылка...

214