Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Formularz z Checkboxami - kolorowe tła
Forum PHP.pl > Forum > Po stronie przeglądarki
coder()
15.01.2008, 13:27:31
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 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
nospor
15.01.2008, 13:32:22
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
coder()
17.01.2008, 22:26:39
a teraz lepiej?? (użyłem jQuery) dzięki za ewentualne pomysły co tu poprawić można

[XML] pobierz, plaintext 
  1. //Funkcja zabezpieczajaca przed zaznaczeniem 2 pól przy tej samej frazie
  2. function recheck(search_by, id, zaznacz, odznacz) {
  3.       $("input[@" + search_by + "=" + zaznacz + id + "]").each(
  4.       function()
  5.       {
  6.             if (this.checked) {
  7.                   $("input[@" + search_by + "=" + odznacz + id + "]").each(
  8.                   function()
  9.                   {
  10.                         this.checked = false;
  11.                   });
  12.             }      
  13.       });
  14. };  
[XML] pobierz, plaintext 


[XML] pobierz, plaintext 
  1. //Funkcja zmieniająca kolor wiersza przy zmianie zaznaczenia checkboxa
  2. $(document).ready(
  3.       function()
  4.       {
  5.             $('input').click(
  6.                   function()
  7.                   {
  8.                         if ($(this).parent('td').is(".b_col"))
  9.                         {
  10.                               $(this).parent('td').parent('tr').css("background", "#FFCCCC");
  11.                         } else {
  12.                               $(this).parent('td').parent('tr').css("background", "#CCFFCC");
  13.                         }
  14.                   });
  15.       });
[XML] pobierz, plaintext 


[XML] pobierz, plaintext 
  1. //Funkcja zaznaczająca kolumne A i zmieniająca wszystkie wiersze na zielone
  2. $(document).ready(
  3.             function() 
  4.         { 
  5.             $("#a_select_all").click(function() 
  6.             { 
  7.                 var checked_status = this.checked; 
  8.                 $("input[@class=a_checkbox]").each(function() 
  9.                 { 
  10.                     this.checked = checked_status; 
  11.                               if(checked_status)
  12.                               {
  13.                                     $(this).parent('td').parent('tr').css("background", "#CCFFCC");
  14.                               } else {
  15.                                     var kwadracik_b = $(this).parent('td').parent('tr').find("input[@class=b_checkbox]");
  16.                                     
  17.                                     if(!kwadracik_b[0].checked){
  18.                                           $(this).parent('td').parent('tr').css("background", "");
  19.                                     }
  20.                               }
  21.                 }); 
  22.                 recheck('class', '', 'a_checkbox', 'b_checkbox')
  23.             }); 
  24.         });
[XML] pobierz, plaintext 


[XML] pobierz, plaintext 
  1. //Funkcja zaznaczająca kolumne B i zmieniająca wszystkie wiersze na czerwone
  2. $(document).ready(
  3.             function() 
  4.             { 
  5.             $("#b_select_all").click(function() 
  6.             { 
  7.                 var checked_status = this.checked;
  8.                 $("input[@class=b_checkbox]").each(
  9.                         function() 
  10.                           { 
  11.                               this.checked = checked_status; 
  12.                               if(checked_status)
  13.                               {
  14.                                     $(this).parent('td').parent('tr').css("background", "#FFCCCC");
  15.                               } else {
  16.                                     var kwadracik_a = $(this).parent('td').parent('tr').find("input[@class=a_checkbox]");
  17.                                     
  18.                                     if(!kwadracik_a[0].checked){
  19.                                           $(this).parent('td').parent('tr').css("background", "");
  20.                                     }
  21.                               }
  22.                      }); 
  23.                      recheck('class', '', 'b_checkbox', 'a_checkbox')
  24.                  }); 
  25.              });
[XML] pobierz, plaintext 


[XML] pobierz, plaintext 
  1. //Funkcja zaznaczająca wierszy przy najechaniu na niego "HOVER" i blokująca kolor wiersza przy zaznaczeniu checkboxa
  2. $(document).ready(
  3.       function()
  4.       {
  5.       $('td').hover(
  6.             function(){
  7.                   var wiersz = $(this).parent("tr");
  8.                   var inputy = wiersz.find("input");
  9.                   if(!inputy[0].checked && !inputy[1].checked)
  10.                   {
  11.                         if(!$(this).is(".b_col")){
  12.                               $(this).parent('tr').css("background", "#CCFFCC");
  13.                         } else {
  14.                               $(this).parent('tr').css("background", "#FFCCCC");
  15.                         }
  16.                   }
  17.             },
  18.             function(){
  19.                   var wiersz = $(this).parent("tr");
  20.                   var inputy = wiersz.find("input");
  21.                   if(!inputy[0].checked && !inputy[1].checked)
  22.                   {
  23.                         $(this).parent('tr').css("background", "");
  24.                   }
  25.             });
  26.       });
[XML] pobierz, plaintext


zauważyłem jedną wadę w funkcji ostatniej... działa na wszystkich tabelkach :/ jak to zmienić?? bo próbowałem przerobić całość na funkcje i wstawić to do onmouseover tabelki ale wtedy skrypt działał strasznie wolno sad.gif
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.