Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Ukrywanie warstwy
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
grzeg123
16.05.2009, 13:46:52
Witam!

Chcę zrobić stronę z ukrywaniem części tabeli, znalazłem jakiś skrypt ukrywania : http://republika.onet.pl/13965,15353,13,06,kursy.html
lecz jak wstawie kod do diva warstwa nie ukrywa się. Proszę o pomoc!

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
  6. <meta http-equiv="Content-Script-Type" content="text/javascript">
  7. <title>Moja strona WWW</title>
  8. <script type="text/javascript">
  9. <!-- Ukrycie przed przegl&plusmn;darkami nieobsługuj&plusmn;cymi JavaScriptu
  10. function pokaz()
  11. {
  12.   document.getElementById("wr1").style.visibility = "visible";
  13. }
  14. function ukryj()
  15. {
  16.   document.getElementById("wr1").style.visibility = "hidden";
  17. }
  18. //Koniec kodu JavaScript -->
  19. </script>
  20. </head>
  21. <body onload="start();">
  22. // - ładuje tabele która będzie cały czas widoczna
  23. <table cellpadding="0" cellspacing="0" width="250">
  24. <tr>
  25. 		<td height="25" width="119" valign="top">ID komputera</td>
  26. 		<td height="25" width="131">&nbsp;</td>
  27. 	</tr>
  28. <tr>
  29. 		<td height="25" width="119" valign="top">Monitor:</td>
  30. 		<td height="25" width="131">&nbsp;</td>
  31. 	</tr>
  32. 	<tr>
  33. 		<td height="25" width="119" valign="top">Pamięć RAM:</td>
  34. 		<td height="25" width="131">&nbsp;</td>
  35. 	</tr>
  36. 	<tr>
  37. 		<td height="25" width="119" valign="top">Dysk Twardy:</td>
  38. 		<td height="25" width="131">&nbsp;</td>
  39. 	</tr>
  40. <tr>
  41. 		<td height="25" valign="top" colspan="2">
  42. <div>
  43. <input   type="radio"  name="rd1"  onclick="pokaz();"  checked>Pokaż
  44. <input  type="radio"  name="rd1"  onclick="ukryj();">Ukryj</div>
  45. </td>
  46. 	</tr>
  47. 	<div id="wr1" style="position:absolute; isibility:visible;"> // - odpowiada za ukrywanie zawartości w tym divie
  48. <tr>
  49. 		<td height="25" width="119" valign="top">Id Monitora:</td>
  50. 		<td height="25" width="131">&nbsp;</td>
  51. 	</tr>
  52. 	<tr>
  53. 		<td height="25" width="119" valign="top">Płyta Główna:</td>
  54. 		<td height="25" width="131">&nbsp;</td>
  55. 	</tr>
  56. 	<tr>
  57. 		<td height="25" width="119" valign="top">Chipset:</td>
  58. 		<td height="25" width="131">&nbsp;</td>
  59. 	</tr>
  60. 	<tr>
  61. 		<td height="25" width="119" valign="top">Procesor:</td>
  62. 		<td height="25" width="131">&nbsp;</td>
  63. 	</tr>
  64. 	<tr>
  65. 		<td height="25" width="119" valign="top">Karta Graficzna:</td>
  66. 		<td height="25" width="131">&nbsp;</td>
  67. 	</tr>
  68. 	<tr>
  69. 		<td height="25" width="119" valign="top">Karta Sieciowa:</td>
  70. 		<td height="25" width="131">&nbsp;</td>
  71. 	</tr>
  72. 	<tr>
  73. 		<td height="25" width="119" valign="top">Mysz / Klawiatura:</td>
  74. 		<td height="25" width="131"></td>
  75. 	</tr>
  76. 	<tr>
  77. 		<td height="25" width="119" valign="top">Inne:</td>
  78. 		<td height="25" width="131"></td>
  79. 	</tr>
  80. 	<tr>
  81. 		<td height="20" width="20" colspan="2">&nbsp;</td>
  82. 	</tr>
  83.  
  84. </div>
  85. </body>
  86. <table>
  87. </html>
[HTML] pobierz, plaintext
singles
16.05.2009, 15:01:58
Najpierw poukładaj ten kod. Kończy się head, Ty ładujesz tabelę, w połowie tabeli dajesz body z funkcją start() która nawet nie jest zdefiniowana. Jak już to poukładasz, to napisz dokładnie które elementy chcesz ukryć.
kamil4u
16.05.2009, 15:05:00
Zacznij od poprawnego HTML - później napisz zadawaj pytania związane z JS - http://validator.w3.org/

--edit--
Spóźniłem się, ale link i tak Ci się przyda
skowron-line
16.05.2009, 16:56:41
@grzeg123 akurat siadałem do JS więc pomyślałem że się rozgrzeje
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.  
  4. <script type="text/javascript">
  5. function show_hide( o )
  6. {
  7. 	var t = document.getElementById( 'oTable' );
  8. 	for( var i=0; i< t.rows.length; i++ )
  9. 	{
  10. 		if( t.rows[ i ].getAttribute( 'class' ) == 'sh' )
  11. 		{
  12. 			t.rows[ i ].style.visibility  = ( o == 1 ) ? 'visible' : 'hidden';
  13. 		}
  14. 	}
  15.  
  16. }
  17.  
  18. </script>
  19. </head>
  20. <body>
  21. <table cellpadding="0" cellspacing="0" width="250" id="oTable">
  22. <tr>
  23. <td height="25" width="119" valign="top">ID komputera</td>
  24. <td height="25" width="131">&nbsp;</td>
  25. </tr>
  26. <tr>
  27. <td height="25" width="119" valign="top">Monitor:</td>
  28. <td height="25" width="131">&nbsp;</td>
  29. </tr>
  30. <tr>
  31. <td height="25" width="119" valign="top">Pamięć RAM:</td>
  32. <td height="25" width="131">&nbsp;</td>
  33. </tr>
  34. <tr>
  35. <td height="25" width="119" valign="top">Dysk Twardy:</td>
  36. <td height="25" width="131">&nbsp;</td>
  37. </tr>
  38. <tr>
  39. 	<td>
  40. 		<input type="radio" name="a" onclick="show_hide( 1 );" checked>Pokaz<br />
  41. 		<input type="radio" name="a" onclick="show_hide( 0 );">Ukryj
  42. 	</td>
  43. </tr>
  44. <tr class="sh">
  45. <td height="25" width="119" valign="top">Id Monitora:</td>
  46. <td height="25" width="131">&nbsp;</td>
  47. </tr>
  48. <tr class="sh">
  49. <td height="25" width="119" valign="top">Płyta Główna:</td>
  50. <td height="25" width="131">&nbsp;</td>
  51. </tr>
  52. <tr class="sh">
  53. <td height="25" width="119" valign="top">Chipset:</td>
  54. <td height="25" width="131">&nbsp;</td>
  55. </tr>
  56. <tr class="sh">
  57. <td height="25" width="119" valign="top">Procesor:</td>
  58. <td height="25" width="131">&nbsp;</td>
  59. </tr>
  60. <tr class="sh">
  61. <td height="25" width="119" valign="top">Karta Graficzna:</td>
  62. <td height="25" width="131">&nbsp;</td>
  63. </tr>
  64. <tr class="sh">
  65. <td height="25" width="119" valign="top">Karta Sieciowa:</td>
  66. <td height="25" width="131">&nbsp;</td>
  67. </tr>
  68. <tr class="sh">
  69. <td height="25" width="119" valign="top">Mysz / Klawiatura:</td>
  70. <td height="25" width="131"></td>
  71. </tr>
  72. <tr class="sh">
  73. <td height="25" width="119" valign="top">Inne:</td>
  74. <td height="25" width="131"></td>
  75. </tr>
  76. <tr class="sh">
  77. <td height="20" width="20" colspan="2">&nbsp;</td>
  78. </tr>
  79.  
  80. <table>
  81. </html>
[HTML] pobierz, plaintext


* wcieło [TAB] ?
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.