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

Метод 1: базовая итерация с помощью функцииeach() из jQuery
Самый простой способ вычисления значений в строках таблицы — это перебор каждой строки с помощью функции jQuery each(). Давайте рассмотрим пример:

$('table tr').each(function() {
  var row = $(this);
  var price = parseFloat(row.find('.price').text());
  var quantity = parseFloat(row.find('.quantity').val());
  var total = price * quantity;
  row.find('.total').text(total.toFixed(2));
});

В этом примере мы предполагаем, что каждая строка имеет поле цены с именем класса 'price', поле количества с именем класса 'quantity'и поле итога с именем имя класса 'total'. Код перебирает каждую строку, извлекает значения цены и количества, вычисляет итоговую сумму и соответствующим образом обновляет поле итоговой суммы.

Метод 2: использование атрибутов данных
Другой подход заключается в использовании атрибутов данных в ячейках таблицы для хранения необходимых значений для вычислений. Этот метод обеспечивает более четкое разделение задач между данными и представлением. Вот пример:

<tr>
  <td data-price="10">10</td>
  <td data-quantity="2"><input type="text" value="2"></td>
  <td data-total></td>
</tr>

$('table tr').each(function() {
  var row = $(this);
  var price = parseFloat(row.find('[data-price]').data('price'));
  var quantity = parseFloat(row.find('[data-quantity] input').val());
  var total = price * quantity;
  row.find('[data-total]').text(total.toFixed(2));
});

В этом примере значения цены и количества сохраняются как атрибуты данных (data-priceи data-quantity) в соответствующих ячейках таблицы. Код извлекает эти значения с помощью метода jQuery data()и выполняет необходимые вычисления.

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

$('table').on('input', 'input.quantity', function() {
  var row = $(this).closest('tr');
  var price = parseFloat(row.find('.price').text());
  var quantity = parseFloat($(this).val());
  var total = price * quantity;
  row.find('.total').text(total.toFixed(2));
});

В этом примере мы привязываем событие inputк селектору 'input.quantity', который нацелен на поля ввода количества в таблице. Когда пользователь вводит или изменяет количество, итоговая сумма в соответствующей строке обновляется в режиме реального времени.