Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dodawanie tabeli.
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Rewil
22.09.2009, 19:22:47
Witam mam następujący problem:

Link do skryptu.

Po dodaniu nowych okienek formularza, okienka te sklejają się, zamiast robić równe odstępy. Próbowałem już kilkanaście razy, ale po pewnym momencie się gubię, i tracę kontrolę, nad całą tabelą. Jeżeli ktoś, bardziej biegły, mógł się temu przyjrzeć, był bym naprawdę szczęśliwy.

Za pomoc, dziękuje.
Pozdrawiam Rewil.


Dobra, udało mi się. Ale powstał, nowy problem, taki iż po wpisaniu czegoś do inputa, i po kliknieciu w button, zawartosc inputa znika. A zależy mi na efekcie, że po kliknięciu pojawia się nowy input, a zawartość porzedniego inputa zostaje. Any ideas?

[HTML] pobierz, plaintext 
  1. <body>
  2.  
  3. <script type="text/javascript" language="Javascript1.2">
  4.  
  5. var i = 2;
  6.  
  7.  
  8. function addInput(){
  9.  
  10. if (i < 10) {
  11. 	var b = '0'+i;
  12. 	}
  13. else {
  14. 	var b = i;
  15. 	}
  16.  
  17. document.getElementById("wyswietl").innerHTML += '<tr><td width="100%" colspan="2">'+b+'.<input type="text" name="imie'+i+'" id="sampleInput" value=""><input type="text" name="nazwisko'+i+'" id="sampleInput" value=""><textarea name="zabieg'+i+'" id="sampleInput" rows="1" cols="50"></textarea><input type="text" name="link'+i+'" id="sampleInput" value=""><hr></td></tr>';
  18.  
  19.  
  20. i++
  21.  
  22. }
  23.  
  24.  
  25. </script>
  26.  
  27.  
  28. <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
  29.   <tr>
  30.     <td width="50%"><b>Pacjenci</b></td>
  31.     <td width="50%">
  32.     <p align="right"><input type="button"  value="Dodaj Pacjenta" onclick="addInput();"></td>
  33.   </tr>
  34. 	<tr>
  35.     		<td width="100%" colspan="2">
  36.  
  37. 			01.<input type="text" name="imie" id="sampleInput" value=""><input type="text" name="nazwisko" id="sampleInput" value=""><textarea name="obrazenia" id="sampleInput" rows="1" cols="50"></textarea><input type="text" name="link" id="sampleInput" value="">
  38. 			<hr>
  39. 		</td>
  40. 	</tr>
  41.  
  42. 	<tr>
  43. 		<td width="100%" colspan="2">
  44. 			<div id="wyswietl"></div>
  45. 		</td>
  46. 	</tr>
  47.  
  48.  
  49. </table>
[HTML] pobierz, plaintext



Mam nadzieje, ze wyraziłem się dość, jasno.
korro
22.09.2009, 21:28:08
Wartości znikają dlatego, że pobierasz html zawarty 'wyswietl' i ponownie go tam umieszczasz.
Do dynamicznych formularzy użyłbym jQuery, dobrzy przykład jest tu: http://jquery.bassistance.de/validate/demo...mic-totals.html
Polega to na tym, że w kodzie html jest ukryty element z wzorcem:
Kod
<textarea style="display:none" id="template">
    <tr>
        <td>
            <label>{0}. Item</label>
        </td>
        <td class='type'>
            <select name="item-type-{0}">
                <option value="">Select...</option>
                <option value="0">Learning jQuery</option>
                <option value="1">jQuery Reference Guide</option>
                <option value="2">jQuery Cookbook</option>
                <option vlaue="3">jQuery In Action</option>
                <option value="4">jQuery For Designers</option>
            </select>
        </td>
        <td class='quantity'>
            <input size='4' class="quantity" min="1" id="item-quantity-{0}" name="item-quantity-{0}" />
        </td>
        <td class='quantity-error'></td>
    </tr>
</textarea>

następnie dodajemy tworzymy szablon i dodajemy zdarzenie do buttona
Kod
var template = jQuery.format($("#template").val());
    function addRow() {
        $(template(i++)).appendTo("#orderitems tbody");
    }
    
    var i = 1;
    // start with one row
    addRow();
    // add more rows on click
    $("#add").click(addRow);

dostajemy bardzo wygodne dynamiczne formy.
Rewil
28.09.2009, 15:52:20
Wszystko łądnie, u góry opisane, ale jedno ale. Nie, ma czegoś prostszego? Z samymi, inputami jako przykładu?
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.