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

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

<script>
  function getRowData(row) {
    var cells = row.getElementsByTagName('td');
    var rowData = [];
    for (var i = 0; i < cells.length; i++) {
      rowData.push(cells[i].innerText);
    }
    console.log(rowData);
  }
</script>
<table>
  <tr onclick="getRowData(this)">
    <td>John Doe</td>
    <td>john.doe@example.com</td>
    <td>25</td>
  </tr>
  <!-- More table rows... -->
</table>

В этом примере мы присоединяем обработчик событий onclickк каждой строке таблицы (<tr>). При щелчке по строке вызывается функция getRowData(), которая извлекает внутренний текст каждой ячейки (<td>) внутри выбранной строки. Данные строки затем записываются на консоль.

Метод 2: решение jQuery
Если вы используете jQuery в своем проекте, вы можете добиться того же результата с меньшим количеством кода. Вот как:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('tr').click(function() {
      var rowData = $(this).children('td').map(function() {
        return $(this).text();
      }).get();
      console.log(rowData);
    });
  });
</script>
<table>
  <tr>
    <td>John Doe</td>
    <td>john.doe@example.com</td>
    <td>25</td>
  </tr>
  <!-- More table rows... -->
</table>

В этом фрагменте мы используем делегирование событий jQuery, чтобы прикрепить обработчик событий клика ко всем строкам таблицы (<tr>). При щелчке по строке функция извлекает текстовое содержимое каждой ячейки (<td>) в выбранной строке с помощью метода map(). Данные строки затем записываются на консоль.

Метод 3. Атрибуты данных.
Другой подход заключается в использовании атрибутов данных HTML5 для хранения данных строк и их извлечения по щелчку мыши. Вот пример:

<script>
  function getRowData(row) {
    var rowData = JSON.parse(row.dataset.rowData);
    console.log(rowData);
  }
</script>
<table>
  <tr onclick="getRowData(this)" data-row-data='{"name": "John Doe", "email": "john.doe@example.com", "age": 25}'>
    <td>John Doe</td>
    <td>john.doe@example.com</td>
    <td>25</td>
  </tr>
  <!-- More table rows... -->
</table>

В этом случае мы прикрепляем данные строки в виде объекта JSON к атрибуту data-row-dataкаждой строки таблицы (<tr>). При нажатии на строку вызывается функция getRowData(), которая извлекает данные JSON с помощью свойства datasetи записывает их в консоль.

Получение данных строк таблицы по клику — распространенное требование в веб-разработке. В этой статье мы рассмотрели несколько методов достижения этой функциональности, включая стандартный подход JavaScript, решение jQuery и использование атрибутов данных. Выберите метод, который лучше всего соответствует потребностям вашего проекта, и начните улучшать взаимодействие с таблицей уже сегодня!