Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Tabela do formularza
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Baardo
1.06.2017, 10:23:03
Napisałem takie coś i wszystko śmiga tylko zastanawiam się czy można zrobić tak żeby wiersz z danymi w tabeli był pokazywany tylko po zaznaczeniu opcji w formularzu?


[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5.  
  6.   <script>
  7.     function fff() {
  8. 	  var tabelka=document.getElementById("tabelka");
  9. 	  var marka=document.getElementById("i1").value;
  10. 	  var model=document.getElementById("i2").value;
  11. 	  var typ=document.getElementById("i3").value;
  12. 	  var poj=document.getElementById("i4").value;
  13. 	  var rocz=document.getElementById("i5").value;
  14.  
  15. 	  var lust=document.getElementById("i6");
  16. 	  var bluetooth=document.getElementById("i7");
  17. 	  var tap=document.getElementById("i8");
  18. 	  var gps=document.getElementById("i9");
  19. 	  var kam=document.getElementById("j1");
  20.  
  21. 	  var lew=document.getElementById("r1");
  22. 	  var praw=document.getElementById("r2");
  23. 	  var strona= "Wybierz, z ktorej strony kierownica";
  24.  
  25. 	  var czarny=document.getElementById("Czarny");
  26. 	  var czerwony=document.getElementById("Czerwony");
  27. 	  var bialy=document.getElementById("Bialy");
  28. 	  var kolor="wybierz kolor";
  29.  
  30.  
  31.  
  32. 	    if(poj<1000) {
  33. 		 poj="";
  34. 		}
  35. 		if(poj>5000) {
  36. 		 poj="";
  37. 		}
  38. 		if(rocz<1900) {
  39. 		  rocz="";
  40. 		}
  41. 		if(lust.checked==true) {
  42. 		  lust="Tak";
  43. 		}
  44. 		else {
  45. 		  lust="Nie";
  46. 		}
  47. 		if(bluetooth.checked==true) {
  48. 		  bluetooth="Tak";
  49. 		}
  50. 		else {
  51. 		  bluetooth="Nie";
  52. 		}
  53. 		if(tap.checked==true) {
  54. 		  tap="Tak";
  55. 		}
  56. 		else {
  57. 		  tap="Nie";
  58. 		}
  59. 		if(gps.checked==true) {
  60. 		  gps="Tak";
  61. 		}
  62. 		else {
  63.  
  64. 		}
  65. 		if(kam.checked==true) {
  66. 		  kam="Tak";
  67. 		}
  68. 		else {
  69. 		  kam="Nie";
  70. 		}
  71. 		if(lew.checked==true) {
  72. 		   strona="z lewej";
  73. 		}
  74. 		if(praw.checked==true) {
  75. 		   strona="z prawej";
  76. 		}
  77. 		if(czarny.selected==true) {
  78. 		 kolor="Czarny";
  79. 		}
  80. 		if(czerwony.selected==true) {
  81. 		 kolor="Czerwony";
  82. 		}
  83. 		if(bialy.selected==true) {
  84. 		 kolor="Bialy";
  85. 		}
  86.  
  87.  
  88.  
  89. 	  tabelka.innerHTML= "<table border=\"1px solid black\"><tr><td>Marka</td><td>"+marka+"</td></tr><tr><td>Model</td><td>"+model+"</td></tr><tr><td>Typ</td><td>"+typ+"</td></tr><tr><td>Pojemnosc</td><td>"+poj+"</td></tr><tr><td>Rocznik</td><td>"+rocz+"</td></tr><tr><td>Podgrz lusterka</td><td>"+lust+"</td></tr><tr><td>Bluetooth</td><td>"+bluetooth+"</td></tr><tr><td>Skorzana tapicerka</td><td>"+tap+"</td></tr><tr><td>GPS</td><td>"+gps+"</td></tr><tr><td>Kamera cofania</td><td>"+kam+"</td></tr><tr><td>Kierownica</td><td>"+strona+"</td></tr><tr><td>Kolor</td><td>"+kolor+"</td></tr></table>";
  90. 	}
  91.   </script>
  92. </head>
  93. <body>
  94.   Marka<input type="text" id="i1"> <br/>
  95.   Model<input type="text" id="i2"><br/>
  96.   Typ<input type="text" id="i3"><br/>
  97.   Pojemnosc<input type="number" id="i4"><br/>
  98.   Rocznik<input type="number" id="i5"><br/>
  99.   <br/><br/>
  100.  
  101.   Podgrzewane lusterka<input type="checkbox" id="i6"><br/>
  102.   Bluetooth<input type="checkbox" id="i7"><br/>
  103.   Skorzana tapicerka<input type="checkbox" id="i8"><br/>
  104.   GPS<input type="checkbox" id="i9"><br/>
  105.   Kamera cofania<input type="checkbox" id="j1"><br/>
  106.   <form name="f1">
  107.   Kierownica <br/>
  108.     Z lewej<input type="radio" name="ra1" id="r1" /><br/>
  109. 	Z prawej <input type="radio" name="ra1" id="r2" /><br/>
  110.   </form>
  111.  Kolor
  112.   <select>
  113.    <option id="Czarny">Czarny</option>
  114.    <option id="Czerwony">Czerwony</option>
  115.    <option id="Bialy">Bialy</option>
  116.   </select>
  117.    <button onclick="fff()">wyslij</button>
  118.   <br/>
  119.   <div id="tabelka">
  120.   </div>
  121. </body>
  122. </html>
[HTML] pobierz, plaintext
gitbejbe
1.06.2017, 21:08:08
click event:
https://www.w3schools.com/jsref/event_onclick.asp


zmiana styli:
https://www.w3schools.com/jsref/dom_obj_style.asp

Neutral
2.06.2017, 04:25:29
Kod
/*el.*/addEventListener('click',function(){
   // if(/* ... */) {
   // div.style.display = 'none';
      // }else{
     //  div.style.display = 'block';
      // }
},false);
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.