Dynamiczne tworzenie tabel i w danej tabeli wiersza

[DkrukD]

Witam, potrzebuję skryptu, który tworzy table z unikalnymi id i w każdej z tych tabel można dodać bądź usunąć dany wiersz.

Próbowałem przerabiać skrypt z tej stronki: http://antczak.org/2009/10/dynamiczne-formularze-z-uzyciem-jquery/ , lecz udało mi się tylko dodać nowe tabele, lecz już nie można w nich dodawać nowych wierszy.

Zna ktoś może jakiś gotowy skrypt lub naprowadzi mnie na rozwiązanie problemu?

Z góry dzięki, pozdrawiam!

P.S Moje dotychczasowe wypociny: http://jsfiddle.net/4ezLX/2/

[Jay]

Spróbuj z flexigrid.info - trudno o lepszą wtyczkę do jq na polu zabaw z tabelami.
Ewentualnie datatables.net, ale jeśli mnie pamięć nie myli to edycja krotek wymagała wprzęgnięcia jeszcze jednej wtyczki jq, a nie wiem jak obecnie wygląda sprawa dynamicznego dodawania danych.

[DkrukD]

Ale w tych wtyczkach nie ma możliwości dynamicznego tworzenia nowych tabeli... Jedyną rzeczą jaką posiadają owe wtyczki to możliwość tworzenia nowych wierszy.

[Jay]

Sugerowałem się tym co wrzuciłeś na fiddle'a.
Może jtable.org będzie tym czego szukasz ?
Niestety, większość gotowców dotyczy sortowania i filtrowania, nie operacji na tabelach.
Bez własnoręcznie rzeźbionego JS się nie obejdzie.

[DkrukD]

I chyba będę się tym sugerowałem. Ale mam problem z tym bo nigdy większej styczności z JS nie miałem ;/
No nic trzeba będzie jakąś książkę zjeść

[Jay]

Podpowiem Ci opierając się na własnym doświadczeniu: JS warto znać, choć nauka jest drogą przez mękę.
Natomiast uciekając się do frameworków JS (w moim przypadku JQ) możemy więcej, szybciej, do tego mniejszym nakładem sił.
JQ jest ogółem rzecz biorąc fajny
Mootools nie jest fajny. Przynajmniej dla mnie nie był*
Tylko nie należy zaczynać od d_py strony, tylko poznać metody a przede wszystkim strukturę DOM, bowiem wtedy wiadomo co i jak można ugryźć.
I co najgorsze, JS to wciąż tylko frontend. Żeby zapisać wyniki prac to wciąż za mało.


*dokumentacja, dema, gotowce, więcej niż jedna możliwość rozwiązania problemu świadczy o potędze

[DkrukD]

Udało mi się zrobić to co chciałem, z tym, że potrzebuję nadać ID każdemu wierszu pobrane z tabeli, w szablonie wierszu:

Kod JS:

Kod:

<script type="text/javascript">
            $(document).ready(function(){

                var i = 1;
                var it = 1;

                var szablonWiersza = jQuery.format($("#szablon").val());
                var szablonTabeli = jQuery.format($("#szablonT").val());                

                function dodajTabele() {
                    var iit = it++;
                    
                    $("#ranking").append(szablonTabeli(iit));

                    $("#usunTabele_" + iit).click(function(){
                        $("#listaOsob_" + iit).remove();
                    });
                    
                    $("#dodajW_" + iit).click(function(){
                            var ii = i++;

                            $("#listaOsob_" + iit + " tbody").append(szablonWiersza(ii));
  
                            $("#usunOsobe_" + ii).click(function(){
                                $("#wiersz_" + ii).remove();
                            });
    
                    });
                }

                $("#dodajTabel").click(dodajTabele);
            });
        </script>

#szablon

Kod:

<textarea id="szablon" style="display:none;" cols="1" rows="1">
            <tr id="wiersz_{0}">
                <td></td>
                <td><input type="text" name="w[{id}][name][]"></td>
                <td><input type="text" name="w[{id}][country][]"></td>
                <td><img src="http://antczak.org/source/dynamic_forms/12.png" id="usunOsobe_{0}" alt="usun"></td>
            </tr>
        </textarea>

To id tabeli w której się znajduje musi się znajdować w atrybucie name w miejscu {id} .
Wiesz, może jak to uczynić?

[Jay]

Da się to zrobić przy użyciu kilku funkcji.
Nie napiszę Ci na kolanie kodu, ale naprowadzę czego można użyć.

Po wszystkich tabelach i ich komórkach przejedziesz funkcją each()
lecąc po wszystkich tabelach:
$("table").each(function () {
var tableid = $(this).attr('id'); //zgarniamy ID danej tabeli

a w obecnej tabeli jadąc po wszystkich td:
$('td').each(function(){

w atrybut elementu ingerujesz funkcją attr(), załóżmy:
$(this).attr('name', 'newname');

Musisz pokombinować jak przygotować 'newname' do wstawienia.
Nie wiem czy zadziała coś takiego jak łączenie stringów w attr: attr('name', 'w['+tableid+'[country][]')
Być może będziesz musiał przygotować string do podmiany wcześniej.

Utrudnieniem jest to, że wartości name nie są takie same we wszystkich td.
Proponuję zatem żebyś wstawił w atrybut name string (albo dodał klasę) po którym rozpoznasz w JQ w jaką komórkę ingerujesz, a następnie z użyciem if-a wywołasz attr()

Mam nadzieję że w miarę jasno to wytłumaczyłem.
Poczytaj o each() i attr(). Jeśli td wygenerujesz z odpowiednimi klasami, to sprawdzisz je używając .hasClass() i wtedy wywołasz attr.