Извлеките данные строки таблицы с помощью кнопки в этой строке с помощью jQuery each ()

TLDR

Я хочу, чтобы мой скрипт ниже возвращал <input id и value строки таблицы, в которой была нажата кнопка. Прямо сейчас он всегда возвращает информацию только из первой строки, независимо от того, в какой строке была кнопка.

Я думаю, что то, что я хочу сделать, простое, и я думаю, что я довольно близок к этому. Но для меня это всего лишь процесс обучения, поэтому возможно вероятно, что я совершаю ошибку новичка.

Я строю корзину. У меня есть строки таблицы, которые построены в цикле foreach. Основная суть такова (с использованием лезвия):

<?php $i = 0; ?>
@foreach($cart as $c)
    <tr class="row-item">
        <td>{{ $c['name'] }}</td>
        <td>{{ $c['price'] }}</td>
        <td><input type="text" class="quantity" id="{{ $c['rowid'] }}" value="{{ $c['qty'] }}"></td>
        <td><button class="btn-remove" id="remove{{ $i }}" name="removeItem"></button></td>
    </tr>
    <?php $i++ ?>
@endforeach

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

Что я хочу сделать в конце, так это заставить кнопку "удалить" строки таблицы установить поле количества этой конкретной строки на ноль и отправить форму (с помощью существующей кнопки отправки формы), тем самым "удаление" товара из корзины. Это уже можно сделать вручную, установив поле количества на ноль, я просто думаю, что должна быть и кнопка удаления, как этого ожидает большинство людей.

Что я хочу сделать в качестве первого шага, так это вернуть <input id и value строки таблицы, в которой находится нажатая кнопка.

Мой сценарий выглядит следующим образом:

$(document).ready(function() {

    $(".row-item").each(function(i) {

        var fieldValue = $(".quantity").val();
        var fieldId = $(".quantity").attr('id');

        $("#remove" + i).click(function(e) {

            console.log(fieldValue, fieldId);

            e.preventDefault();
        });
    });
});

Это работает... вроде. Независимо от того, какую кнопку удаления строки я нажимаю, консоль отображает информацию из первого .row-item.

4 2e9f9685813dee35a13376eccb21431b

Замечательно. Это в основном то, что я после. Я могу разобраться с информацией позже, мне просто нужно сначала получить соответствующую информацию :)

Но если я нажму кнопку удаления в другой строке, я получу то же самое. Очевидно, моя итерация работает не так, как хотелось бы.

Поиграйте здесь

Мне пришлось жестко запрограммировать некоторые переменные в скрипте

ИЗМЕНИТЬ

Хорошо, этот ответ работает, поскольку я могу получить все различные данные в консоли. Это прогресс! Но я еще не уверен, как использовать это с моими кнопками "удалить"...


jquery each closest
person JoshP    schedule 14.02.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете легко сделать это, используя jQuery для обхода DOM вместо повторения и поиска материала таким образом.

Вот немного рабочего кода и обновленная скрипта:

$(document).ready(function () {

    $('#product-table').on( 'click', '.btn-remove', function( event ) {
        var $tr = $(this).closest('tr');
        $tr.find('.quantity').val( '0' );
        $tr.find('.total').text( '0.00' );
        // Submit your form here
    });
});

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

Я внес пару изменений в ваш HTML, чтобы использовать этот код:

  • Добавлен id="product-table" к основному <table>.
  • Добавлено class="total" к каждому из "всего" <strong> элементов.
person Michael Geary    schedule 14.02.2014
comment
Спасибо большое! Так лаконичнее. Мне не нужен селектор .total, так как это значение передается представлению. Я просмотрел документы, и мне кажется, что соответствующий бит The .closest() method begins its search with the element itself. Правильно ли я понимаю, что именно по этой причине здесь работает closest()? Просто пытаюсь понять, почему это работает ‹-- учится здесь :) - person JoshP; 15.02.2014
comment
Вы правы. .closest('tr') начинается с самого элемента (в данном случае <button>) и проходит путь от родителя к родителю, пока не найдет соответствие для селектора. Другой способ сделать это - .parents('tr').first(). Вы могли бы даже просто сказать .parents('tr') в этом конкретном случае, но это сильно сломалось бы, если бы вы когда-нибудь вложили эту таблицу в другую таблицу. (Он вернет <tr> элементов из как внутренней таблицы, так и внешней таблицы.) - person Michael Geary; 15.02.2014