На этом шаге мы рассмотрим реализацию удаления выбранного товара.

    Если покупатель, посетивший наш сайт, передумал приобретать какие-либо книги, уже добавленные им в корзину с покупками, он может изменить значение поля Количество для этой покупки, записав в него значение 0. Однако мы можем реализовать более наглядную возможность, добавив в каждый элемент списка кнопку Delete (Удалить). Щелчок на кнопке может давать тот же эффект, что и изменение поля Количество, но визуальная обратная связь может подкрепить факт, что данный предмет не будет куплен.

    Для начала нам необходимо добавить новые кнопки. Так как они не могут функционировать без поддержки JavaScript, мы не будем определять их в разметке HTML. Вместо этого мы добавим их в каждую строку таблицы с помощью jQuery:

  $('<th> </th>')
    .insertAfter('#cart thead th:nth-child(2)');
  $('#cart tbody tr').each(function() {
     $deleteButton = $('<img />').attr({
       'width': '16',
       'height': '16',
       'src': 'images/cross.png',
       'alt': 'Удалить из корзины',
       'title': 'Удалить из корзины',
       'class': 'clickable'
      });
     $('<td></td>')
      .insertAfter($('td:nth-child(2)', this))
      .append($deleteButton);
  });
  $('<td> </td>')
  .insertAfter('#cart tfoot td:nth-child(2)');

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

    Теперь необходимо реализовать поведение кнопок. Для этого изменим определение кнопок и добавим обработчик события click:

  $('<th> </th>')
    .insertAfter('#cart thead th:nth-child(2)');
  $('#cart tbody tr').each(function() {
     $deleteButton = $('<img />').attr({
       'width': '16',
       'height': '16',
       'src': 'images/cross.png',
       'alt': 'Удалить из корзины',
       'title': 'Удалить из корзины',
       'class': 'clickable'
     }).click(function() {
       $(this).parents('tr').find('td.quantity input')
         .val(0);
     });

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

    Нам необходимо инициировать пересчет, как если бы значение поля было изменено пользователем:

  $('<th> </th>')
    .insertAfter('#cart thead th:nth-child(2)');
  $('#cart tbody tr').each(function() {
     $deleteButton = $('<img />').attr({
       'width': '16',
       'height': '16',
       'src': 'images/cross.png',
       'alt': 'Удалить из корзины',
       'title': 'Удалить из корзины',
       'class': 'clickable'
     }).click(function() {
       $(this).parents('tr').find('td.quantity input')
         .val(0).trigger('change');
     });

    Теперь щелчок на кнопке вызывает пересчет суммарных значений, как показано на рисунке 1.

Рис.1. Щелчок на кнопке Удалить вызывает пересчет суммарных значений

    На следующем шаге мы закончим изучение этого вопроса.

Предыдущий шаг Содержание Следующий шаг