Выделение строк таблицы

В этой небольшой заметке будет рассмотрено как средствами php и css организовать выделение строк таблицы попеременно другим цветом для более читабельного вида, а также как сделать подсветку строк таблицы при событии

:hover

(то есть, при наведение курсора мыши).

Выделение строк таблицы попеременно разными цветами


В общем случае выделить строки таблицы можно при формировании html-кода страницы средствами php — «на лету». Для этого нужно, чтобы каждый второй тег

<tr>

имел отдельный класс:

<tr class='gr'>

В css-коде свойство класса background-color будет иметь определенное значение, благодаря чему произойдет визуальное выделение каждой второй строки.

Итак, для улучшения качества юзабилити сайта с помощью ниже приведенного php-кода со счетчиком организуем попеременное выделение строк таблицы, выводимой на страницу из любой базы данных:

while( $row = $result->fetch_assoc() ){  
    
    if ($x==1) {
      echo(" <tr>\n");
      $x=0;
    } else {
      echo(" <tr class='gr'>\n");
      $x=1;
    }
     
    
      echo ("  <td>".$row['id']."</td>\n  <td>"
                    .$row['filename']."</td>\n  <td>"
                    .$row['filedate']."</td>\n  <td>"
                    .$row['filesize']."</td>\n  <td>"
                    .$row['datereg']."</td>\n  <td>"
                    .$row['timereg']."</td>\n  <td>"
                    .$row['descript']."</td>\n </tr>\n\n");
        
    } 
    print_r('</table>');

Обратите внимание на конструкцию

if ($x==1) {
      echo(" <tr>\n");
      $x=0;
    } else {
      echo(" <tr class='gr'>\n");
      $x=1;
    }

Именно она для последующего выделения каждому второму тегу открытия строки присваивается класс gr

Далее — дело техники. В таблицу стилей добавляем код

.gr {
    background-color:   azure; //выделяем строку в таблице нужным цветом заливки
}

Так легко «раскрасить» попеременно все строки таблицы в желаемый цвет.

Подсветка таблицы (выделение строк таблицы при наведенном курсоре)

Теперь перейдем ко второму вопросу, а именно: как подсветить таблицу, а точнее выделить ее строки при наведении на них курсора? Решение очень простое. Чистый CSS:

tr:hover{ //свойство для выделения будет применяться только при наведении курсора на строку
    background-color:  highlight;
}

Вы можете скопировать приведенный код и вставить в свой файл стилей. (Это не вызовет затруднений, как у некоторых пользователей, которым не удается скопировать текст с сайта, который защищен владельцем от копирования без дополнительных телодвижений).

Теперь вы можете без проблем выделить (сделать попеременную подсветку строк) свою html-таблицу, используя небольшой кусок php-кода, а также с помощью css-стиля улучшить пользовательские характеристики своего сайта

Учитесь основам css и php — это совсем несложно, но поможет вам справиться со многими задачами, связанными с автоматизацией. Кроме того, может прямо сейчас ознакомиться с тем, как импортировать данные SQLite в MySql через Excel — это вполне доступно даже неопытному пользователю.

До скорого!

8 Replies to “Выделение строк таблицы”

    • Спасибо, Михаил, за добрые слова. Искренне рад. Заходите еще.

  1. Pingback: Вывод двумерного массива в виде таблицы

  2. Pingback: Вывод из PHP двумерного массива в виде HTML таблицы

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

*

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.