Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.09.2018, 22:22
Аватар для Alex57B
Интересующийся
Отправить личное сообщение для Alex57B Посмотреть профиль Найти все сообщения от Alex57B
 
Регистрация: 01.08.2013
Сообщений: 14

Корректное удаление строки из таблицы
Всем привет!
Есть код:
$('tr i#delete-product').click(function(event) {
	
			Idproducttr = event.target.closest("tr").getAttribute('data-shopcode');
	    	
			var html;

	    	$('#testConfirm').addClass('simple-dialog active');

	    	html = '<div class="simple-dialog-content">';
	    	html += '<div class="simple-dialog-header"><h3 class="title">Подтвердите</h3></div>';
	    	html += '<div class="simple-dialog-body"><p class="message">Удалить</p></div>';
	    	html += '<div class="simple-dialog-footer clearfix"><button class="simple-dialog-button accept" data-action="submit">ОК</button><button class="simple-dialog-button cancel" data-action="submit">Нет</button></div>';
	    	html += '</div>';

	    	$('#testConfirm').html(html);

	    	$(document).on('click', 'button[data-action="submit"]', function(e) {
				
				// e.preventDefault();
				
				$(this).parents('.simple-dialog').removeClass('active');
				
				if($(this).hasClass('accept')) {
					 
					  event.target.closest("tr").remove();
					
					console.log(Idproducttr);
				}
				
				if($(this).hasClass('cancel')) {
				
				console.log('cancel');
				
				}
			
			});
	   
		
	});

Он удаляет строку из таблицы с товарами заказа.
Суть в том что при повторном нажатии на иконку удалить, он возвращает данные предшествующего элемента, а при третьем нажатии данные двух предыдущих. Т.е. создается массив с данными как я понял. Как сделать чтобы при повторном нажатии удалялась нужная строки и возвращались данные только той строки в которой была нажата кнопка удалить?
HTML строки таблицы:
<tr data-shopcode="TS62969">
		<td class="text-push">TS62969</td>
		<td>Прямой терморегулирующий вентиль 1/2" ВР (арт. FT 1640 12)</td>
		<td class="text-push product-qty" data-type="product_qty" id="edit-data">2</td>
		<td class="text-center">шт</td>
		<td class="text-push" nowrap=""><span class="product-price">883</span> руб.</td>
		<td class="text-push" nowrap=""><span class="ammount-products-price">1766</span> руб.</td>
		<td class="action edit"><i class="fa fa-pencil-square fa-2x" aria-hidden="true"></i></td>
		<td class="text-center"><i class="fa fa-trash-o  fa-2x" aria-hidden="true" id="delete-product"></i></td>
	</tr>
Ответить с цитированием
  #2 (permalink)  
Старый 16.09.2018, 22:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,419

Alex57B,
клик в клике не назначают, если конечно не хотят убить браузер
Ответить с цитированием
  #3 (permalink)  
Старый 16.09.2018, 22:37
Аватар для Alex57B
Интересующийся
Отправить личное сообщение для Alex57B Посмотреть профиль Найти все сообщения от Alex57B
 
Регистрация: 01.08.2013
Сообщений: 14

рони,
Т.е. надо две функции? Первая для вызова всплывающего окна, вторая для удаления при клике на кнопку "ОК" из всплывающего окна?
Ответить с цитированием
  #4 (permalink)  
Старый 16.09.2018, 22:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,419

Alex57B,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #testConfirm {
      display: none;
  }
  #testConfirm.active {
      display:  block;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    var html;
    html = '<div class="simple-dialog-content">';
    html += '<div class="simple-dialog-header"><h3 class="title">Подтвердите</h3></div>';
    html += '<div class="simple-dialog-body"><p class="message">Удалить</p></div>';
    html += '<div class="simple-dialog-footer clearfix"><button class="simple-dialog-button accept" data-action="submit">ОК</button><button class="simple-dialog-button cancel" data-action="submit">Нет</button></div>';
    html += '</div>';

    $('#testConfirm').html(html);
    var tr;
    $('#testConfirm').on('click', 'button[data-action="submit"]', function(e) {
         if ($(this).is(".accept")) {
            tr && tr.remove();
        }
        $('#testConfirm').removeClass('simple-dialog active');

    });
    $('tr i#delete-product').click(function(event) {
        tr = $(this).parents("tr");
        $('#testConfirm').addClass('simple-dialog active');
    });
});
  </script>
</head>

<body>
<table>
    <tr data-shopcode="TS62969">
        <td class="text-push">TS62969</td>
        <td>Прямой терморегулирующий вентиль 1/2" ВР (арт. FT 1640 12)</td>
        <td class="text-push product-qty" data-type="product_qty" id="edit-data">2</td>
        <td class="text-center">шт</td>
        <td class="text-push" nowrap=""><span class="product-price">883</span> руб.</td>
        <td class="text-push" nowrap=""><span class="ammount-products-price">1766</span> руб.</td>
        <td class="action edit"><i class="fa fa-pencil-square fa-2x" aria-hidden="true"></i></td>
        <td class="text-center"><i class="fa fa-trash-o  fa-2x" aria-hidden="true" id="delete-product">x</i></td>
    </tr>

</table>
<div id="testConfirm"></div>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 16.09.2018, 23:48
Аватар для Alex57B
Интересующийся
Отправить личное сообщение для Alex57B Посмотреть профиль Найти все сообщения от Alex57B
 
Регистрация: 01.08.2013
Сообщений: 14

рони,
главный специалист этого форума Спасибо огромное!

Пойду AJAX прикручивать и пересчет общей стоимости заказа при удалении строки.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как передать данные в другую панель из выбранной строки таблицы. layout: 'card'. Пролетарий ExtJS 5 03.06.2015 22:53
Получение данных из строки таблицы idShura AJAX и COMET 3 30.05.2014 15:39
Динамическое удаление строк таблицы Tankist Events/DOM/Window 16 03.07.2013 15:42
Как реализовать скроллинг в Div-е до указанной строки таблицы. Shabol Элементы интерфейса 3 24.09.2010 13:19
Как вложено прятать строки таблицы? Бобр Общие вопросы Javascript 10 01.08.2010 12:57