Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] Dynamicznie wstawienie tr -> td -> div -> input
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
slepiec68
Witam

W JS jestem na poziomie zlobka wiec moje pytanie moze sie niektorym wydac smieszne :/

Tworze dynamicznie tabele: 1 wiersz to 6 kolumn z opisem, 2 wiersz to samo z checkbox-ami, a ponizej wiersz z div w ktorym potrzebuje umiescic input

Mam taki kod:
  1. function dodajtab(id) {
  2.  
  3. var naglowek = new Array("pryw","sluz","PKP","PKS","pasaż","inny");
  4. var input = new Array("prywatny","sluzbowy","pkp","pks","pasazer","inny");
  5.  
  6. var element = document.getElementById("typ_" + id);
  7. var tbl = document.createElement("table");
  8. var tblBody = document.createElement("tbody");
  9. var row = document.createElement("tr");
  10.  
  11. for (var i = 0; i < 6; i++) {
  12. var cell = document.createElement("td");
  13. var cellText = document.createTextNode(naglowek[i]);
  14. cell.appendChild(cellText);
  15. row.appendChild(cell);
  16. }
  17. tblBody.appendChild(row);
  18.  
  19. var row = document.createElement("tr");
  20.  
  21. for (var i = 0; i < 6; i++) {
  22. cell = document.createElement("td");
  23. cell.setAttribute("style", "text-align: center;");
  24. el = document.createElement("input");
  25. el.type = "checkbox";
  26. el.value = "checkbox"
  27. el.name = "wyjazd[" + id + "][" + input[i] + "]";
  28. if(input[i] == "inny") el.setAttribute("onChange", "inny(this); return false;");
  29. cell.appendChild(el);
  30. row.appendChild(cell);
  31. }
  32. tblBody.appendChild(row);
  33.  
  34. var row = document.createElement("tr");
  35.  
  36. cell = document.createElement("td");
  37. cell.setAttribute("colspan", "6");
  38. cell.setAttribute("style", "text-align: center;");
  39.  
  40. el = document.createElement("div");
  41. el.setAttribute("id","wyjazd[" + id + "][inny_block]");
  42. el.setAttribute("style","display: none;");
  43.  
  44. cell.appendChild(el);
  45. row.appendChild(cell);
  46.  
  47. tblBody.appendChild(row);
  48. tbl.appendChild(tblBody);
  49. element.appendChild(tbl);
  50. }


Problem jest taki ze nie moge sobie poradzic z dynamicznym wstawieniem tego ostatniego input do div wyjazd[" + id + "][inny_block] :/

Bede wdzieczny za pomoc.

--
pozdrawiam
Marek
kamil4u
W takim razie co tam robi to:
Kod
el.setAttribute("style","display: none;"); //na forum 42 linia
?

Jak to nie to daj przykład live -np. tu: http://jsfiddle.net/
slepiec68
... ustala display: none dla div, poniewaz ma sie on pojawic dopiero po wybraniu ostatniego pola checkbox - "inny", po wybraniu ktorego trzeba podac jaki i do tego potrzebuje input

statyczny kod ktory chce wygenerowac wyglada tak

  1. <table align="center" border="0" cellpadding="2" cellspacing="0">
  2. <tr>
  3. <td>pryw</td>
  4. <td>służ</td>
  5. <td>PKP</td>
  6. <td>PKS</td>
  7. <td>pasaż</td>
  8. <td>inny</td>
  9. </tr>
  10. <tr>
  11. <td align="center" valign="middle"><input name="wyjazd[0][prywatny]" value="checkbox" type="checkbox"></td>
  12. <td align="center" valign="middle"><input name="wyjazd[0][sluzbowy]" value="checkbox" type="checkbox"></td>
  13. <td align="center" valign="middle"><input name="wyjazd[0][pkp]" value="checkbox" type="checkbox"></td>
  14. <td align="center" valign="middle"><input name="wyjazd[0][pks]" value="checkbox" type="checkbox"></td>
  15. <td align="center" valign="middle"><input name="wyjazd[0][pasazer]" value="checkbox" type="checkbox"></td>
  16. <td align="center" valign="middle"><input name="wyjazd[0][inny]" id="wyjazd[0][inny]" value="checkbox" onchange="inny(this); return false;" type="checkbox"></td>
  17. </tr>
  18. <tr>
  19. <td colspan="6" style="text-align: center;"><div id="wyjazd[0][inny_block]" style="display: none;">
  20. <input name="wyjazd[0][inny_opis]" id="wyjazd[0][inny_opis]" value="" type="text">
  21. </div></td>
  22. </tr>
  23. </tbody>
kamil4u
Aha w takim razie wcześniej średnio zrozumiałem pytanie wink.gif

Kod
el = document.createElement("div");
el.setAttribute("id","wyjazd[" + id + "][inny_block]");
el.setAttribute("style","display: none;");

el2 = document.createElement("input");
/*Parametry input-a*/
el.appendChild(el2);


i oprócz tego:
Kod
if(input[i] == "inny") el.setAttribute("onChange", "inny(this); return false;");
tak zdarzeń się nie dodaje - poczytaj w google o uniwersalnym dodawaniu takowych - "addEvent JS"
slepiec68
Dziekuje za odpowiedz - kilka lykow kawy rozjasmilo mi umysl i problem rozwiazalem wlasciwie tak samo

  1. el = document.createElement("div");
  2. el.setAttribute("id","wyjazd[" + id + "][inny_block]");
  3. el.setAttribute("style","display: none;");
  4.  
  5. var inp = document.createElement("input");
  6. inp.type="text";
  7. inp.setAttribute("id","wyjazd[" + id + "][inny_opis]");
  8. inp.setAttribute("name","wyjazd[" + id + "][inny_opis]");
  9. el.appendChild(inp);

... musialo mi sie "przetrawic" o co w tym wszystkich chodzi smile.gif

Taka konstrukcje
  1. el.setAttribute("onChange", ...);

Znalazlem w innych skryptach i dlatego zastosowalem.

O "addEvent JS" oczywiscie poczytam i postaram sie stosowac smile.gif

Dziekuje za odpowiedzi

----------

Skrypt dziala poprawnie ale kod HTML juz nie sad.gif

Na FF, O i Chrome wyglada tak:



ale juz kochany IE8 wyswietla tak:



ma ktos pomysl dlaczego?

--
pozdrawiam
Marek
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.