В современной веб-разработке таблицы являются распространенным способом отображения данных. Иногда вам может потребоваться предоставить пользователям возможность выбирать несколько строк в таблице с помощью флажков. Эту функцию часто называют «проверяемыми строками таблицы». В этой статье мы рассмотрим различные методы реализации и оформления проверяемых строк таблицы с использованием HTML, CSS и JavaScript. Итак, приступим!

Метод 1: чистый HTML и CSS
Один простой подход к реализации проверяемых строк таблицы — использование чистого HTML и CSS. Мы можем использовать элемент <input>с атрибутом type="checkbox"и применять стили CSS для улучшения визуального вида. Вот пример:

<table>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <!-- Additional rows -->
</table>

input[type="checkbox"] {
  /* Add desired styling */
}

Метод 2: обработка событий JavaScript
Чтобы добавить интерактивность и динамически обрабатывать выбор флажков, мы можем использовать JavaScript. В этом методе мы прикрепляем прослушиватели событий к флажкам и выполняем действия на основе выбора пользователя. Вот простой пример:

<script>
  function handleCheckboxChange(event) {
    const checkbox = event.target;
    const row = checkbox.parentNode.parentNode; // Get the parent row
    // Perform actions based on checkbox state
    if (checkbox.checked) {
      row.classList.add("selected");
    } else {
      row.classList.remove("selected");
    }
  }
</script>
<table>
  <tr>
    <td><input type="checkbox" onChange="handleCheckboxChange(event)" /></td>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <!-- Additional rows -->
</table>

Метод 3: библиотека jQuery
Если вы используете jQuery в своем проекте, вы можете воспользоваться преимуществами его упрощенного синтаксиса и мощных возможностей обработки событий. Вот пример получения проверяемых строк таблицы с помощью jQuery:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $("input[type='checkbox']").change(function() {
      const row = $(this).closest("tr"); // Get the closest parent row
      // Perform actions based on checkbox state
      if ($(this).is(":checked")) {
        row.addClass("selected");
      } else {
        row.removeClass("selected");
      }
    });
  });
</script>
<table>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <!-- Additional rows -->
</table>

Добавление проверяемых строк таблицы в ваше веб-приложение может значительно улучшить взаимодействие с пользователем при работе с табличными данными. Мы исследовали разные методы: от чистого HTML и CSS до JavaScript и jQuery. Реализуя эти методы, вы можете предоставить пользователям возможность легко выбирать несколько строк. Не забудьте оформить и настроить флажки в соответствии с дизайном вашего приложения. Приятного кодирования!