Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript] Formularz z Checkboxami - kolorowe tła
coder()
post
Post #1





Grupa: Zarejestrowani
Postów: 21
Pomógł: 0
Dołączył: 3.05.2007

Ostrzeżenie: (0%)
-----

Witam.
Napisałem dzisiaj taki formularz z załączonym skryptem JS. Całość działa swietnie i wogóle... Ale jest całość jest troche duża co przy połączeniu z php i dynamicznym generowaniu dużych ilosci wierszy formularza może znacznie zmulić serwer i przeglądarke klienta. Czy byłby ktoś w stanie to jakos zminimalizować?? Bo ja próbuje i co zmienie jakąś nazwe/id/klase itp to wszystko sie wali (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)

(całość ma przypominać w działaniu panel PhpMyAdmin)
Oto kod:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function getElementsByClassName(cn){
  5.   var arr = new Array(); 
  6.   var els = document.getElementsByTagName("*");
  7.   var exp= new RegExp("^(.* )?"+cn+"( .*)?$", "g");
  8.   for (var i = 0; i < els.length; i++ ){
  9.     if (exp.test(els[i].className)){
  10.       arr.push(els[i]);
  11.     }
  12.   }
  13.   return arr;
  14. }
  15.  
  16. function select_all(obj_check, cn_check, cn_uncheck, num_rows, style) { 
  17. 	var checkboxes = getElementsByClassName(cn_check);
  18. 	var un_checkboxes = getElementsByClassName(cn_uncheck); 
  19. 	for (i = 0; i < checkboxes.length; i++) { 
  20. 		if (obj_check.checked == true) { 
  21. 			checkboxes[i].checked = true;
  22. 			for (x = 0; x < un_checkboxes.length; x++) {
  23. 				un_checkboxes[x].checked = false;
  24. 			}
  25. 		} else { 
  26. 			checkboxes[i].checked = false; 
  27. 		} 
  28. 	}
  29. 	for (i = 0; i < num_rows; i++) {
  30. 		if (obj_check.checked) {
  31. 			document.getElementById('accept' + i).style.background=style;
  32. 			document.getElementById('locked' + i).style.background=style;
  33. 			document.getElementById('phrase' + i).style.background=style;
  34. 			document.getElementById('phrase_row' + i).style.background=style;
  35. 		} else if (obj_check.checked == false && checkboxes[i].checked == false && un_checkboxes[i].checked == false) {
  36. 			document.getElementById('accept' + i).style.background='';
  37. 			document.getElementById('locked' + i).style.background='';
  38. 			document.getElementById('phrase' + i).style.background='';
  39. 			document.getElementById('phrase_row' + i).style.background='';			
  40. 		}
  41. 	}
  42. } 
  43. function select_all2(obj_check, cn_check, cn_uncheck, num_rows, style) {
  44. 	obj_check.checked = !obj_check.checked;
  45. 	select_all(obj_check, cn_check, cn_uncheck);
  46. 	var checkboxes = getElementsByClassName(cn_check);
  47. 	var un_checkboxes = getElementsByClassName(cn_uncheck); 
  48. 	for (i = 0; i < num_rows; i++) {
  49. 		if (obj_check.checked) {
  50. 			document.getElementById('accept' + i).style.background=style;
  51. 			document.getElementById('locked' + i).style.background=style;
  52. 			document.getElementById('phrase' + i).style.background=style;
  53. 			document.getElementById('phrase_row' + i).style.background=style;
  54. 		} else if (obj_check.checked == false && checkboxes[i].checked == false && un_checkboxes[i].checked == false) {
  55. 			document.getElementById('accept' + i).style.background='';
  56. 			document.getElementById('locked' + i).style.background='';
  57. 			document.getElementById('phrase' + i).style.background='';
  58. 			document.getElementById('phrase_row' + i).style.background='';			
  59. 		}
  60. 	}
  61. } 
  62.  
  63. function select_checkbox(obj_checked, uncheck_name, style, id){
  64. 	var checkbox = document.getElementsByName(uncheck_name)
  65. 	if (obj_checked.checked == true) {
  66. 		document.getElementById('accept' + id).style.background=style;
  67. 		document.getElementById('locked' + id).style.background=style;
  68. 		document.getElementById('phrase' + id).style.background=style;
  69. 		document.getElementById('phrase_row' + id).style.background=style;
  70. 		checkbox[0].checked = false;
  71. 	}
  72. }
  73.  
  74. function changeBox(cbox, ucbox, style, id) {
  75. 	ubox = eval(ucbox);
  76. 	document.getElementById('accept' + id).style.background=style;
  77. 	document.getElementById('locked' + id).style.background=style;
  78. 	document.getElementById('phrase' + id).style.background=style;
  79. 	document.getElementById('phrase_row' + id).style.background=style;
  80. 	if (ubox.checked) {
  81. 		ubox.checked = !ubox.checked;
  82. 		box = eval(cbox);
  83. 		box.checked = !box.checked;
  84. 	} else {
  85. 		box = eval(cbox);
  86. 		box.checked = !box.checked;
  87. 	}
  88. }
  89.  
  90. function bg_phrase(id, style){
  91. 	document.getElementById(id).style.background=style;
  92. }
  93.  
  94. function bg_phrase_out(id, style){
  95. 	document.getElementById(id).style.background=style;
  96. }
  97.  
  98. function bg_phrase2(kolumna, id, style, box_checked, box_uchecked, td_checked){
  99. 	var box1 = document.getElementById(box_checked);
  100. 	var box2 = document.getElementById(box_uchecked);
  101. 	if (box1.checked == false && box2.checked == false) {		
  102. 		document.getElementById('accept' + id).style.background=style;
  103. 		document.getElementById('locked' + id).style.background=style;
  104. 		document.getElementById('phrase' + id).style.background=style;
  105. 		document.getElementById('phrase_row' + id).style.background=style;
  106. 	} else if (box1.checked == true && box2.checked == false && kolumna == 'locked') {
  107. 		document.getElementById(kolumna + id).style.background=style;
  108. 	} else if (box1.checked == false && box2.checked == true && (kolumna == 'accept' || kolumna == 'phrase')) {
  109. 		document.getElementById('accept' + id).style.background=style;
  110. 	}
  111. }
  112.  
  113. function bg_phrase_out2(kolumna, id, style, box_checked, box_uchecked){
  114. 	var box1 = document.getElementById(box_checked);
  115. 	var box2 = document.getElementById(box_uchecked);
  116. 	var kolor = document.getElementById('phrase_row' + id).style.background;
  117. 	if (box1.checked == false && box2.checked == false) {
  118. 		document.getElementById('accept' + id).style.background='';
  119. 		document.getElementById('locked' + id).style.background='';
  120. 		document.getElementById('phrase' + id).style.background='';
  121. 		document.getElementById('phrase_row' + id).style.background='';
  122. 	} else if (box1.checked == true && box2.checked == false && kolumna == 'locked') {
  123. 		document.getElementById(kolumna + id).style.background=kolor;
  124. 	} else if (box1.checked == false && box2.checked == true && (kolumna == 'accept' || kolumna == 'phrase')) {
  125. 		document.getElementById('accept' + id).style.background=kolor;
  126. 	}
  127. }
  128. </script>
  129. </head>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <body>
  2. <form>
  3. <table>
  4. <tr id="phrase_row0">
  5. 	<td class="accept" id="accept0" 
  6. 		onMouseOver="bg_phrase2('accept', '0', '#CCFFCC', 'a_checkbox0', 'b_checkbox0', 'phraset0');" 
  7. 		onMouseOut="bg_phrase_out2('accept', '0', '#FFFFFF', 'a_checkbox0', 'b_checkbox0');">
  8. 		<input class="a_checkbox" id="a_checkbox0" 
  9. 			onclick="select_checkbox(this, 'x0', '#CCFFCC', '0');" type="checkbox" name="y0" value="opcja1" /></td>
  10. 	<td class="locked" id="locked0" 
  11. 		onMouseOver="bg_phrase2('locked', '0', '#FFCCCC', 'a_checkbox0', 'b_checkbox0', 'phraset0');" 
  12. 		onMouseOut="bg_phrase_out2('locked', '0', '#FFFFFF', 'a_checkbox0', 'b_checkbox0');">
  13. 		<input class="b_checkbox" id="b_checkbox0" 
  14. 			onclick="select_checkbox(this, 'y0', '#FFCCCC', '0');" type="checkbox" name="x0" value="opcja1" /></td>
  15. 	<td class="phrase" id="phrase0" 
  16. 		onMouseOver="bg_phrase2('phrase', '0', '#CCFFCC', 'a_checkbox0', 'b_checkbox0', 'phraset0');" 
  17. 		onMouseOut="bg_phrase_out2('phrase', '0', '#FFFFFF', 'a_checkbox0', 'b_checkbox0');" 
  18. 		onclick="changeBox(document.getElementById('a_checkbox0'), document.getElementById('b_checkbox0'), '#CCFFCC', '0');">
  19. 		Opcja 1<br /></td>
  20. </tr>
  21. <tr id="phrase_row1">
  22. 	<td class="accept" id="accept1" 
  23. 		onMouseOver="bg_phrase2('accept', '1', '#CCFFCC', 'a_checkbox1', 'b_checkbox1', 'phraset1');" 
  24. 		onMouseOut="bg_phrase_out2('accept', '1', '#FFFFFF', 'a_checkbox1', 'b_checkbox1');">
  25. 		<input  class="a_checkbox" id="a_checkbox1" 
  26. 			onclick="select_checkbox(this, 'x1', '#CCFFCC', '1');" type="checkbox" name="y1" value="opcja2" /></td>
  27. 	<td class="locked" id="locked1" 
  28. 		onMouseOver="bg_phrase2('locked', '1', '#FFCCCC', 'a_checkbox1', 'b_checkbox1', 'phraset1');" 
  29. 		onMouseOut="bg_phrase_out2('locked', '1', '#FFFFFF', 'a_checkbox1', 'b_checkbox1');">
  30. 		<input class="b_checkbox" id="b_checkbox1" 
  31. 			onclick="select_checkbox(this, 'y1', '#FFCCCC', '1');" type="checkbox" name="x1" value="opcja2" /></td>
  32. 	<td class="phrase" id="phrase1" 
  33. 		onMouseOver="bg_phrase2('phrase', '1', '#CCFFCC', 'a_checkbox1', 'b_checkbox1', 'phraset1');" 
  34. 		onMouseOut="bg_phrase_out2('phrase', '1', '#FFFFFF', 'a_checkbox1', 'b_checkbox1');" 
  35. 		onclick="changeBox(document.getElementById('a_checkbox1'), document.getElementById('b_checkbox1'), '#CCFFCC', '1');">
  36. 		Opcja 2<br /></td>
  37. </tr>
  38. <tr id="phrase_row2">
  39. 	<td class="accept" id="accept2" 
  40. 		onMouseOver="bg_phrase2('accept', '2', '#CCFFCC', 'a_checkbox2', 'b_checkbox2', 'phraset2');" 
  41. 		onMouseOut="bg_phrase_out2('accept', '2', '#FFFFFF', 'a_checkbox2', 'b_checkbox2');">
  42. 		<input  class="a_checkbox" id="a_checkbox2" 
  43. 			onclick="select_checkbox(this, 'x2', '#CCFFCC', '2');" type="checkbox" name="y2" value="opcja3" /></td>
  44. 	<td class="locked" id="locked2" 
  45. 		onMouseOver="bg_phrase2('locked', '2', '#FFCCCC', 'a_checkbox2', 'b_checkbox2', 'phraset2');" 
  46. 		onMouseOut="bg_phrase_out2('locked', '2', '#FFFFFF', 'a_checkbox2', 'b_checkbox2');">
  47. 		<input class="b_checkbox" id="b_checkbox2" 
  48. 			onclick="select_checkbox(this, 'y2', '#FFCCCC', '2');" type="checkbox" name="x2" value="opcja3" /></td>
  49. 	<td class="phrase" id="phrase2" 
  50. 		onMouseOver="bg_phrase2('phrase', '2', '#CCFFCC', 'a_checkbox2', 'b_checkbox2', 'phraset2');" 
  51. 		onMouseOut="bg_phrase_out2('phrase', '2', '#FFFFFF', 'a_checkbox2', 'b_checkbox2');" 
  52. 		onclick="changeBox(document.getElementById('a_checkbox2'), document.getElementById('b_checkbox2'), '#CCFFCC', '2');">
  53. 		Opcja 3<br /></td>
  54. </tr>
  55. <tr id="phrase_row3">
  56. 	<td class="accept" id="accept3" 
  57. 		onMouseOver="bg_phrase2('accept', '3', '#CCFFCC', 'a_checkbox3', 'b_checkbox3', 'phraset3');" 
  58. 		onMouseOut="bg_phrase_out2('accept', '3', '#FFFFFF', 'a_checkbox3', 'b_checkbox3');">
  59. 		<input  class="a_checkbox" id="a_checkbox3" 
  60. 			onclick="select_checkbox(this, 'x3', '#CCFFCC', '3');" type="checkbox" name="y3" value="opcja4" /></td>
  61. 	<td class="locked" id="locked3" 
  62. 		onMouseOver="bg_phrase2('locked', '3', '#FFCCCC', 'a_checkbox3', 'b_checkbox3', 'phraset3');" 
  63. 		onMouseOut="bg_phrase_out2('locked', '3', '#FFFFFF', 'a_checkbox3', 'b_checkbox3');">
  64. 		<input class="b_checkbox" id="b_checkbox3" 
  65. 			onclick="select_checkbox(this, 'y3', '#FFCCCC', '3');" type="checkbox" name="x3" value="opcja4" /></td>
  66. 	<td class="phrase" id="phrase3" 
  67. 		onMouseOver="bg_phrase2('phrase', '3', '#CCFFCC', 'a_checkbox3', 'b_checkbox3', 'phraset3');" 
  68. 		onMouseOut="bg_phrase_out2('phrase', '3', '#FFFFFF', 'a_checkbox3', 'b_checkbox3');" 
  69. 		onclick="changeBox(document.getElementById('a_checkbox3'), document.getElementById('b_checkbox3'), '#CCFFCC', '3');">
  70. 		Opcja 4<br /><br /></td>
  71. </tr>
  72. <tr id="phraseall">
  73. 	<td class="accept" id="phrase_a" 
  74. 		onMouseOver="bg_phrase('phraseall', '#CCFFCC');" 
  75. 		onMouseOut="bg_phrase_out('phraseall', '#FFFFFF');">
  76. 	<input type="checkbox" class="a_checkbox" id="a_select_all" name="select_all[]" value="select_all" 
  77. 			onclick="select_all(this, 'a_checkbox', 'b_checkbox', '4', '#CCFFCC');" /></td>
  78. 	<td class="locked" id="phrase_l" 
  79. 		onMouseOver="bg_phrase('phraseall', '#FFCCCC');" 
  80. 		onMouseOut="bg_phrase_out('phraseall', '#FFFFFF');">
  81. 		<input type="checkbox" class="b_checkbox" id="b_select_all" name="select_all[]" value="select_all" 
  82. 			onclick="select_all(this, 'b_checkbox', 'a_checkbox', '4', '#FFCCCC');" /></td>
  83. 	<td class="phrase" id="phrase_p" 
  84. 		onMouseOver="bg_phrase('phraseall', '#CCFFCC');" 
  85. 		onMouseOut="bg_phrase_out('phraseall', '#FFFFFF');" 
  86. 		onclick="select_all2(document.getElementById('a_select_all'), 'a_checkbox', 'b_checkbox', '4', '#CCFFCC');">
  87. 		Zaznacz wszystko</td>
  88. </tr>
  89. </table>
  90. </form>
  91. </body>
  92. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
nospor
post
Post #2





Grupa: Moderatorzy
Postów: 36 559
Pomógł: 6315
Dołączył: 27.12.2004
Pierwsza rzecz jaka mi sie rzuca w oczy:
Kod
checkboxes = getElementsByClassName(cn_check);

No a twoja funkcja getElementsByClassName() pobiera wszystkie elementy na stronie (div, a, inne ) i wnich szuka danej klasy. Kiepsciutko. Skoro szukasz checkboxow, to powinienes pobrac tylko inputy i to najlepiej z type=checkbox i dopiero w nich szukac swojej klasy.

Reszty mi sie niechce analizowac bo uwazam ze nie ma to sensu. Zainteresuj sie gotowymi libami, jak np jQuery, ktore odwali za Ciebie większą czesc kodu co tu pokazales. Na dodatek bedziesz mial pewnosc ze pod kazda przegladarka bedzie ci dzialac i ze bedzie dzialac ci szybciej niz twoj kod
Go to the top of the page
+Quote Post

Posty w temacie
- coder()   [JavaScript] Formularz z Checkboxami - kolorowe tła   15.01.2008, 13:27:31
- - nospor   Pierwsza rzecz jaka mi sie rzuca w oczy: Kodcheckb...   15.01.2008, 13:32:22
- - coder()   a teraz lepiej?? (użyłem jQuery) dzi...   17.01.2008, 22:26:39

« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 3.10.2025 - 18:18
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn