Dynamiczne dodawani inputów.

Cześć.

Mam potrzebę na żądanie użytkownika dodać kolejną linie z inputami. Przez skrypt podpięty pod przycisk dodaje do drzewa DOM, kolejne definicje inputów, które są odpowiednio nazwane etc. Problem w tym, że dajmy na to - uzupełnię pierwszą linie inputów, klikam, żeby dodać drugą, no i druga się dodaje, ale zawartość pierwszej znika. Jak to obejść - czyli po dodaniu drugiej linii, pierwsza zachowuje swoje wartości ? Wyobrażam sobie, że mogę programowo zapamiętać ich wartości i dodać nowe inputy z wartością domyślną, ale nie wiem czy to poprawne, i czy nie ma innego sposobu. Proszę o pomoc. Tak dodaje kolejne inputy:

document.getElementById(TableID).innerHTML += generateTROfInputs();

gdzie generateTROfInputs() zwraca kolejny TR z inputami nazwanymi <nazwa>+1;

Dzięki za wasz czas.

Zmieniając innerHTML niszczysz wszystko wewnątrz.

Niemniej tak chyba każdy zaczyna. Elementy powinieneś tworzyć i umieszczać w sobie stosując metody typu createElement czy appendChild. No ale jak chcesz na szybko to - niech ta Twoja funkcja generuje wiersz, ale bez otaczających <tr></tr>. Następnie zamiast tego kodu co podałeś zrób coś takiego:

var newTR = document.createElement('tr');
newTR.innerHTML = generateTROfInputs();
document.getElementById(TableId).querySelector('tbody').appendChild(newTR);

Tym sposobem tworzysz sobie poza stroną nowy <tr>, tylko jego zawartość niszczysz wpychając tam stringa z HTML-em (ale to nie powinno mieć znaczenia w tym przypadku), następnie takiego <tr> po ludzku, tak-jak-to-sie-powinno-robic-[tm] wstawiasz do tbody Twojej tabelki.

Ja mam zrobioną tabelką na css na divach tak:

DIV.table 
{
    display:table;
}
FORM.tr, DIV.tr
{
    display:table-row;
}
SPAN.td
{
    display:table-cell;
}

i używam to :

<div class="table">
    <form method="post" action="sumbit.php" enctype="multipart/form-data">
        <div class = "tr">
		<span class="td">
			Imię:
			<input type="text" name="name"/>
			Nazwisko:
			<input type="text" name="lastname"/>
			Data urodzenia:
	         	<input type="date" name="birthdate"/>
		</span>
             
                 ... 

                </br>
		<div id="experience" >
		 
		</div>

		<div class="tr">
			<input type="button" value="+ Dodaj doświadczenie" onclick="addExperience('experience');">
		</div>

                 ...

	</div>
    </form>
</div>

Nie wiem czy to poprawnie...

Więc zrobiłem troszkę inaczej:

        var newTR = document.createElement('tr');
        newTR.innerHTML = addTR(addExperienceInputs());
        document.getElementById(ID).appendChild(newTR);

Działa wyśmienicie ! Dzięki wielkie za pomoc ! Głupio, ale dopiero odkrywam www i te sprawy, zawsze siedziałem w innych regionach programowania i nie doceniałem www. Super mi pomogłeś !

Hm, w sumie to u Ciebie powinno być więc

var newTR = createElement('div');
newTR.className = "tr";
// .. i reszta jak była

Przykłady kodu, potrzebne kawałki JS i HTML wrzucaj na jsbin.com przy postowaniu - ułatwia rozwiązanie problemu i pracę nad kodem :)

Dzięki za kolejne sugestie ! Zapamiętam.