Как перебрать строки таблицы с помощью jQuery и получить значения ячеек?
Проблема с получением значений и количества для каждого товара в таблице
Я пытаюсь получить значения и количество каждого товара из следующей таблицы:
<table class="checkout itemsOverview">
<tr class="item">
<td>GR-10 Senderos</td>
<td><span class="value">15.00</span> €</td>
<td><input type="text" value="1" maxlength="2" class="quantity" /></td>
</tr>
<tr class="item">
<td>GR-10 Senderos<br/>GR-66 Camino de la Hermandad<br/>GR 88 Senderos del Jarama<br/>Camino del Cid</td>
<td><span class="value">45.00</span> €</td>
<td><input type="text" class="quantity" value="1" maxlength="2"/></td>
</tr>
</table>
Я использую следующий код jQuery для получения значений и количества каждого товара:
$("tr.item").each(function(i, tr) {
var value = $(tr + " span.value").html();
var quantity = $(tr + " input.quantity").val();
});
Однако код не работает, и я не получаю нужные значения. Может кто-нибудь помочь решить эту проблему?
3 ответ(ов)
Этот код использует jQuery для итерации по всем строкам таблицы с классом item
. Для каждой строки он выполняет следующие действия:
- С помощью
$(this)
создается jQuery-объект для текущей строки. - Извлекается содержимое HTML элемента с классом
value
, который находится внутри текущей строки, и сохраняется в переменнойvalue
. - Получается значение из поля ввода с классом
quantity
, которое также находится в текущей строке, и сохраняется в переменнойquantity
.
Обратите внимание, что переменная $this
следует объявить как var $this = $(this);
, чтобы избежать потенциальных проблем с областью видимости переменной.
Вот исправленный код:
$("tr.item").each(function() {
var $this = $(this); // Объявляем переменную с использованием var
var value = $this.find("span.value").html(); // Получаем HTML-содержимое элемента span с классом value
var quantity = $this.find("input.quantity").val(); // Получаем значение поля ввода с классом quantity
});
Таким образом, вы сможете избежать ошибок, связанных с неявным созданием переменных.
Ваш код проходит по всем строкам таблицы с классом item
, извлекая текст из элемента span
с классом value
и значение из элемента input
с классом quantity
для каждой строки. Вот как это выглядит на русском языке в стиле ответа на StackOverflow:
Вы можете использовать следующий код jQuery для итерации по всем строкам таблицы с классом item
и получения значений из указанных элементов:
$("tr.item").each(function(i, tr) {
var value = $("span.value", tr).text(); // Получаем текст из элемента span с классом value
var quantity = $("input.quantity", tr).val(); // Получаем значение из input с классом quantity
});
В этом коде each
выполняет функцию для каждой строки tr
, где i
— это индекс текущей строки. Затем с помощью селекторов мы извлекаем текст из элемента span
и значение из элемента input
, чтобы использовать их дальше по вашему усмотрению.
Если вам нужно что-то сделать с этими значениями, вы можете добавить дополнительную логику внутри функции each
. Например, вы можете вывести их в консоль:
console.log("Value:", value, "Quantity:", quantity);
Надеюсь, это поможет! Если у вас есть дополнительные вопросы, не стесняйтесь задавать.
Ваш код выглядит неплохо, но в нем есть несколько моментов, которые можно улучшить. Например, функция iterate
не возвращает значение, что может вызывать незапланированные проблемы. Вот переработанный вариант вашего кода:
var value = iterate('tr.item span.value');
var quantity = iterate('tr.item span.quantity');
function iterate(selector) {
var result = [];
$(selector).each(function () {
result.push($(this).html());
});
return result.join(','); // Возвращаем строку, где элементы разделены запятой
}
Изменения, которые были внесены:
- Вместо строки
result
, используйте массивresult
, чтобы хранить значения. Это упрощает добавление новых элементов. - После завершения цикла
each
, используйтеjoin(',')
, чтобы соединить элементы массива в строку с разделителем запятой. - Удалена проверка
if ($(selector))
, так как результат будет пустым массивом, если селектор не будет найден, и это не вызовет ошибок.
Теперь вы сможете корректно получать значения из ваших селекторов, и ваш код станет более читабельным и эффективным!
Как перенаправить на другую веб-страницу?
Прокрутка к элементу с использованием jQuery
Как определить нажатие клавиши Esc?
Как получить данные формы с помощью JavaScript/jQuery?
Как выполнить код после сброса HTML-формы с помощью jQuery?