Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dodawanie rekordów tabeli skonfigurowanych po za obszarem tabeli
Forum PHP.pl > Forum > Po stronie przeglądarki
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();
  });
});


  1. <button type='button' class='btn btn-flat btn-default' id='dodajPozycje'><i class='fa fa-plus'></i> Dodaj pozycje</button>
  2. <table class='table table-condesed table-striped table-responsive'>
  3. <tr>
  4. <th>Wysokość</th>
  5. <th>Szerokość</th>
  6. <th>Ilość</th>
  7. <th>CenaNetto</th>
  8. <th>Inne</th>
  9. </tr>
  10. </thead>
  11. <tbody id='listaPozycji'></tbody>
  12.  
  13. <div style='display:none;' id='elementPozycji' data-last-id='0'>
  14. <tr>
  15. <td><br><input type='text' name='H[%s]' class='form-control' placeholder='wysokosc'></td>
  16. <td><input type='text' name='L[%s]' class='form-control' placeholder='szerokosc'></td>
  17. <td><input type='text' name='ilosc[%s]' class='form-control' placeholder='ilosc'></td>
  18. <td><input type='text' name='cena[%s]' class='form-control' placeholder='cena'></td>
  19. <td class='usunPozycje btn btn-flat'>USUN</td>
  20. </tr>
  21. </div>
trueblue
Proponuję przenieść źródłowe wiersze do niewidocznego <tbody> w docelowej tabeli (tabela może mieć kilka <tbody>).
Tomplus
  1. <table style='display:none;' id='elementPozycji' data-last-id='0'>
  2. <tr>
  3. <td><br><input type='text' name='H[%s]' class='form-control' placeholder='wysokosc'></td>
  4. <td><input type='text' name='L[%s]' class='form-control' placeholder='szerokosc'></td>
  5. <td><input type='text' name='ilosc[%s]' class='form-control' placeholder='ilosc'></td>
  6. <td><input type='text' name='cena[%s]' class='form-control' placeholder='cena'></td>
  7. <td class='usunPozycje btn btn-flat'>USUN</td>
  8. </tr>
  9. </tbody>


Powiem tak, w ten sposób problem rozwiązało.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.