Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jQuery i dynamiczna tabela
Forum PHP.pl > Forum > Po stronie przeglądarki
Sadamowski
22.03.2012, 19:47:58
Hej,

po dynamicznym dodaniu elementów tabeli, nowe <tr> nie podlegają regule podświetlania
czemu to nie działa i co zrobić żeby zaczęło: 

[HTML] pobierz, plaintext 
  1. <html> 
  2.  
  3. 	<head>
  4. 		<script type="text/javascript" src="jquery.js"> </script>
  5.  
  6. 		<script type="text/javascript">
  7.  
  8. 			$(document).ready(function(){
  9.  
  10.  
  11.  
  12. 				$('#button').click(function(){
  13.  
  14. 					var id = $('#input1').val();
  15. 					var val = $('#input2').val();
  16.  
  17. 					var newTR = '<tr><td>' + id + '</td><td>' + val + '</td></tr>';
  18.  
  19. 					$('#tab').append(newTR);
  20.  
  21.  
  22. 				});
  23.  
  24. 				$('#tab tr').hover(function(){
  25. 											$(this).css('background','red');
  26.  
  27. 										},
  28. 							  function(){
  29. 											$(this).css('background','');
  30. 										}
  31.  
  32. 				);
  33.  
  34. 			});
  35.  
  36. 		</script>
  37.  
  38.  
  39.  
  40. 	</head>
  41.  
  42. 	<body>
  43.  
  44. 		<h1> Header1 </h1>
  45.  
  46.  
  47. 		<form id='form1' name='form1'>
  48. 			<input id='input1' name='input1' value=''/>
  49. 			<input id='input2' name='input2' value=''/>
  50. 		</form>
  51.  
  52. 			<table id='tab' name='tab' style='width: 400px;' >
  53. 				<tr>
  54. 					<th>id</th>
  55. 					<th>Value</th>
  56. 				</tr>
  57. 				<tr>
  58. 					<td>Test1</td>
  59. 					<td>Test2</td>
  60. 				</tr>
  61. 			</table>
  62.  
  63.  
  64. 		<input id="button" type="button" value="Click Me" />
  65.  
  66.  
  67. 	<body>
  68. </html>
  69.  
[HTML] pobierz, plaintext


ciekawe jest ze jesli dodaje nowe elementy do <selecta> to możemy z nich zczytywać wartości czyli uzyskujemy dostęp to nowo wygenerowanych elementów:

tak jak tu:

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2.  
  3.             $(document).ready(function(){
  4.  
  5.  
  6.  
  7.  
  8.                 $('#button').click(function(){
  9.  
  10.                     var id = $('#input1').val();
  11.  
  12.                     var val = $('#input2').val();
  13.  
  14.  
  15.                     var newTR = '<option value=' + id + '>' + val + '</option>';
  16.  
  17.                     $('#sel').append(newTR);
  18.  
  19.  
  20.                 });
  21.  
  22.                 $('#sel').change(function(){
  23.                                             var s = $('#sel').val();
  24.                                             alert(s);
  25.  
  26.                                             });
  27.  
  28.  
  29.  
  30.             });
  31.  
  32. </script>
  33.  
  34.  
  35.  
  36. </head>
  37.  
  38. <body>
  39.  
  40. <h1> Header1 </h1>
  41.  
  42.  
  43. <form id='form1' name='form1'>
  44. <input id='input1' name='input1' value=''/>
  45. <input id='input2' name='input2' value=''/>
  46. </form>
  47.  
  48.  
  49.  
  50.  
  51. <select id='sel' name='sel'>
  52.  
  53. <option value='1'> Param </option>
  54. <option value='2'> Param </option>
  55.  
  56. </select>
  57. <br>
  58. <label> Value </label> <input id='Enter' name='Enter'></input>
  59.  
  60.  
  61. <input id="button" type="button" value="Click Me" /> 
[HTML] pobierz, plaintext


z góry dzieki za odpowiedz
jaslanin
22.03.2012, 21:01:11
http://jsfiddle.net/5yUSP/

[PHP] pobierz, plaintext 
  1.     $('#tab tr').live('mouseover mouseout', function(event) {
  2.         if (event.type == 'mouseover') {
  3.             $(this).css('background','red');
  4.         } else {
  5.             $(this).css('background','');        
  6.         }
  7.     });
[PHP] pobierz, plaintext
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.