Dodawanie rekordów tabeli skonfigurowanych po za obszarem tabeli, jQuery, js Opcje

[Tomplus]

Mam dwa przykłady kodu getHtml i appendHtml prawie taki sam.

1. Działający:
https://jsfiddle.net/Tomplus/jbu8z8wn/

2. Nie działający (działa ale źle):
https://jsfiddle.net/Tomplus/5duz485x/


1. Polega na pobraniu kontentu opartego na DIV i powieleniu po kliknięciu na guzik.
2. Drugi przykład jest taki sam, ale element jest jako rząd tabeli <table>.

Proszę o pomoc, co należy zrobić aby ten drugi przykład zaczął działać poprawnie.
Z tego co widzę w konsoli, podczas pobierania treści HTML zostają usunięte elementy tabeli, tj. TR i TD.

Kod

var divId = '#elementPozycji';
var element = $(divId).html();
var i = $(divId).data('lastId');
var table = $('#listaPozycji');
$('button#dodajPozycje').click(function() {
  i++;
  $(divId).data('lastId', i);
  record = element.replace(/%s/g, i)
  table.append(record);
  $('.usunPozycje').on('click', function() {
    var id = $(this).data('id');
    $(this).parent().remove();
  });
});

[HTML] pobierz, plaintext 
<button type='button' class='btn btn-flat btn-default' id='dodajPozycje'><i class='fa fa-plus'></i> Dodaj pozycje</button>
<table class='table table-condesed table-striped table-responsive'>
		<thead>
			<tr>
				<th>Wysokość</th>
				<th>Szerokość</th>
				<th>Ilość</th>
				<th>CenaNetto</th>
				<th>Inne</th>
			</tr>
		</thead>
		<tbody id='listaPozycji'></tbody>
</table>
 
<div style='display:none;' id='elementPozycji' data-last-id='0'>
  <tr>
		<td><br><input type='text' name='H[%s]' class='form-control' placeholder='wysokosc'></td>
		<td><input type='text' name='L[%s]' class='form-control' placeholder='szerokosc'></td>
		<td><input type='text' name='ilosc[%s]' class='form-control' placeholder='ilosc'></td>
		<td><input type='text' name='cena[%s]' class='form-control' placeholder='cena'></td>
		<td class='usunPozycje btn btn-flat'>USUN</td>
	</tr>
</div>
[HTML] pobierz, plaintext 

[trueblue]

Proponuję przenieść źródłowe wiersze do niewidocznego <tbody> w docelowej tabeli (tabela może mieć kilka <tbody>).

[Tomplus]

[HTML] pobierz, plaintext 
<table style='display:none;' id='elementPozycji' data-last-id='0'>
  <tbody>
  <tr>
		<td><br><input type='text' name='H[%s]' class='form-control' placeholder='wysokosc'></td>
		<td><input type='text' name='L[%s]' class='form-control' placeholder='szerokosc'></td>
		<td><input type='text' name='ilosc[%s]' class='form-control' placeholder='ilosc'></td>
		<td><input type='text' name='cena[%s]' class='form-control' placeholder='cena'></td>
		<td class='usunPozycje btn btn-flat'>USUN</td>
	</tr>
  </tbody>
</table>
[HTML] pobierz, plaintext 

Powiem tak, w ten sposób problem rozwiązało.

Ten post edytował Tomplus 13.10.2017, 14:57:27