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:
<script type="text/javascript"> function getElementsByClassName(cn){
var arr = new Array();
var els = document.getElementsByTagName("*");
var exp= new RegExp("^(.* )?"+cn+"( .*)?$", "g");
for (var i = 0; i < els.length; i++ ){
if (exp.test(els[i].className)){
arr.push(els[i]);
}
}
return arr;
}
function select_all(obj_check, cn_check, cn_uncheck, num_rows, style) {
var checkboxes = getElementsByClassName(cn_check);
var un_checkboxes = getElementsByClassName(cn_uncheck);
for (i = 0; i < checkboxes.length; i++) {
if (obj_check.checked == true) {
checkboxes[i].checked = true;
for (x = 0; x < un_checkboxes.length; x++) {
un_checkboxes[x].checked = false;
}
} else {
checkboxes[i].checked = false;
}
}
for (i = 0; i < num_rows; i++) {
if (obj_check.checked) {
document.getElementById('accept' + i).style.background=style;
document.getElementById('locked' + i).style.background=style;
document.getElementById('phrase' + i).style.background=style;
document.getElementById('phrase_row' + i).style.background=style;
} else if (obj_check.checked == false && checkboxes[i].checked == false && un_checkboxes[i].checked == false) {
document.getElementById('accept' + i).style.background='';
document.getElementById('locked' + i).style.background='';
document.getElementById('phrase' + i).style.background='';
document.getElementById('phrase_row' + i).style.background='';
}
}
}
function select_all2(obj_check, cn_check, cn_uncheck, num_rows, style) {
obj_check.checked = !obj_check.checked;
select_all(obj_check, cn_check, cn_uncheck);
var checkboxes = getElementsByClassName(cn_check);
var un_checkboxes = getElementsByClassName(cn_uncheck);
for (i = 0; i < num_rows; i++) {
if (obj_check.checked) {
document.getElementById('accept' + i).style.background=style;
document.getElementById('locked' + i).style.background=style;
document.getElementById('phrase' + i).style.background=style;
document.getElementById('phrase_row' + i).style.background=style;
} else if (obj_check.checked == false && checkboxes[i].checked == false && un_checkboxes[i].checked == false) {
document.getElementById('accept' + i).style.background='';
document.getElementById('locked' + i).style.background='';
document.getElementById('phrase' + i).style.background='';
document.getElementById('phrase_row' + i).style.background='';
}
}
}
function select_checkbox(obj_checked, uncheck_name, style, id){
var checkbox = document.getElementsByName(uncheck_name)
if (obj_checked.checked == true) {
document.getElementById('accept' + id).style.background=style;
document.getElementById('locked' + id).style.background=style;
document.getElementById('phrase' + id).style.background=style;
document.getElementById('phrase_row' + id).style.background=style;
checkbox[0].checked = false;
}
}
function changeBox(cbox, ucbox, style, id) {
ubox = eval(ucbox);
document.getElementById('accept' + id).style.background=style;
document.getElementById('locked' + id).style.background=style;
document.getElementById('phrase' + id).style.background=style;
document.getElementById('phrase_row' + id).style.background=style;
if (ubox.checked) {
ubox.checked = !ubox.checked;
box = eval(cbox);
box.checked = !box.checked;
} else {
box = eval(cbox);
box.checked = !box.checked;
}
}
function bg_phrase(id, style){
document.getElementById(id).style.background=style;
}
function bg_phrase_out(id, style){
document.getElementById(id).style.background=style;
}
function bg_phrase2(kolumna, id, style, box_checked, box_uchecked, td_checked){
var box1 = document.getElementById(box_checked);
var box2 = document.getElementById(box_uchecked);
if (box1.checked == false && box2.checked == false) {
document.getElementById('accept' + id).style.background=style;
document.getElementById('locked' + id).style.background=style;
document.getElementById('phrase' + id).style.background=style;
document.getElementById('phrase_row' + id).style.background=style;
} else if (box1.checked == true && box2.checked == false && kolumna == 'locked') {
document.getElementById(kolumna + id).style.background=style;
} else if (box1.checked == false && box2.checked == true && (kolumna == 'accept' || kolumna == 'phrase')) {
document.getElementById('accept' + id).style.background=style;
}
}
function bg_phrase_out2(kolumna, id, style, box_checked, box_uchecked){
var box1 = document.getElementById(box_checked);
var box2 = document.getElementById(box_uchecked);
var kolor = document.getElementById('phrase_row' + id).style.background;
if (box1.checked == false && box2.checked == false) {
document.getElementById('accept' + id).style.background='';
document.getElementById('locked' + id).style.background='';
document.getElementById('phrase' + id).style.background='';
document.getElementById('phrase_row' + id).style.background='';
} else if (box1.checked == true && box2.checked == false && kolumna == 'locked') {
document.getElementById(kolumna + id).style.background=kolor;
} else if (box1.checked == false && box2.checked == true && (kolumna == 'accept' || kolumna == 'phrase')) {
document.getElementById('accept' + id).style.background=kolor;
}
}
<td class="accept" id="accept0" onMouseOver="bg_phrase2('accept', '0', '#CCFFCC', 'a_checkbox0', 'b_checkbox0', 'phraset0');"
onMouseOut="bg_phrase_out2('accept', '0', '#FFFFFF', 'a_checkbox0', 'b_checkbox0');">
<input class="a_checkbox" id="a_checkbox0" onclick="select_checkbox(this, 'x0', '#CCFFCC', '0');" type="checkbox" name="y0" value="opcja1" /></td> <td class="locked" id="locked0" onMouseOver="bg_phrase2('locked', '0', '#FFCCCC', 'a_checkbox0', 'b_checkbox0', 'phraset0');"
onMouseOut="bg_phrase_out2('locked', '0', '#FFFFFF', 'a_checkbox0', 'b_checkbox0');">
<input class="b_checkbox" id="b_checkbox0" onclick="select_checkbox(this, 'y0', '#FFCCCC', '0');" type="checkbox" name="x0" value="opcja1" /></td> <td class="phrase" id="phrase0" onMouseOver="bg_phrase2('phrase', '0', '#CCFFCC', 'a_checkbox0', 'b_checkbox0', 'phraset0');"
onMouseOut="bg_phrase_out2('phrase', '0', '#FFFFFF', 'a_checkbox0', 'b_checkbox0');"
onclick="changeBox(document.getElementById('a_checkbox0'), document.getElementById('b_checkbox0'), '#CCFFCC', '0');">
<td class="accept" id="accept1" onMouseOver="bg_phrase2('accept', '1', '#CCFFCC', 'a_checkbox1', 'b_checkbox1', 'phraset1');"
onMouseOut="bg_phrase_out2('accept', '1', '#FFFFFF', 'a_checkbox1', 'b_checkbox1');">
<input class="a_checkbox" id="a_checkbox1" onclick="select_checkbox(this, 'x1', '#CCFFCC', '1');" type="checkbox" name="y1" value="opcja2" /></td> <td class="locked" id="locked1" onMouseOver="bg_phrase2('locked', '1', '#FFCCCC', 'a_checkbox1', 'b_checkbox1', 'phraset1');"
onMouseOut="bg_phrase_out2('locked', '1', '#FFFFFF', 'a_checkbox1', 'b_checkbox1');">
<input class="b_checkbox" id="b_checkbox1" onclick="select_checkbox(this, 'y1', '#FFCCCC', '1');" type="checkbox" name="x1" value="opcja2" /></td> <td class="phrase" id="phrase1" onMouseOver="bg_phrase2('phrase', '1', '#CCFFCC', 'a_checkbox1', 'b_checkbox1', 'phraset1');"
onMouseOut="bg_phrase_out2('phrase', '1', '#FFFFFF', 'a_checkbox1', 'b_checkbox1');"
onclick="changeBox(document.getElementById('a_checkbox1'), document.getElementById('b_checkbox1'), '#CCFFCC', '1');">
<td class="accept" id="accept2" onMouseOver="bg_phrase2('accept', '2', '#CCFFCC', 'a_checkbox2', 'b_checkbox2', 'phraset2');"
onMouseOut="bg_phrase_out2('accept', '2', '#FFFFFF', 'a_checkbox2', 'b_checkbox2');">
<input class="a_checkbox" id="a_checkbox2" onclick="select_checkbox(this, 'x2', '#CCFFCC', '2');" type="checkbox" name="y2" value="opcja3" /></td> <td class="locked" id="locked2" onMouseOver="bg_phrase2('locked', '2', '#FFCCCC', 'a_checkbox2', 'b_checkbox2', 'phraset2');"
onMouseOut="bg_phrase_out2('locked', '2', '#FFFFFF', 'a_checkbox2', 'b_checkbox2');">
<input class="b_checkbox" id="b_checkbox2" onclick="select_checkbox(this, 'y2', '#FFCCCC', '2');" type="checkbox" name="x2" value="opcja3" /></td> <td class="phrase" id="phrase2" onMouseOver="bg_phrase2('phrase', '2', '#CCFFCC', 'a_checkbox2', 'b_checkbox2', 'phraset2');"
onMouseOut="bg_phrase_out2('phrase', '2', '#FFFFFF', 'a_checkbox2', 'b_checkbox2');"
onclick="changeBox(document.getElementById('a_checkbox2'), document.getElementById('b_checkbox2'), '#CCFFCC', '2');">
<td class="accept" id="accept3" onMouseOver="bg_phrase2('accept', '3', '#CCFFCC', 'a_checkbox3', 'b_checkbox3', 'phraset3');"
onMouseOut="bg_phrase_out2('accept', '3', '#FFFFFF', 'a_checkbox3', 'b_checkbox3');">
<input class="a_checkbox" id="a_checkbox3" onclick="select_checkbox(this, 'x3', '#CCFFCC', '3');" type="checkbox" name="y3" value="opcja4" /></td> <td class="locked" id="locked3" onMouseOver="bg_phrase2('locked', '3', '#FFCCCC', 'a_checkbox3', 'b_checkbox3', 'phraset3');"
onMouseOut="bg_phrase_out2('locked', '3', '#FFFFFF', 'a_checkbox3', 'b_checkbox3');">
<input class="b_checkbox" id="b_checkbox3" onclick="select_checkbox(this, 'y3', '#FFCCCC', '3');" type="checkbox" name="x3" value="opcja4" /></td> <td class="phrase" id="phrase3" onMouseOver="bg_phrase2('phrase', '3', '#CCFFCC', 'a_checkbox3', 'b_checkbox3', 'phraset3');"
onMouseOut="bg_phrase_out2('phrase', '3', '#FFFFFF', 'a_checkbox3', 'b_checkbox3');"
onclick="changeBox(document.getElementById('a_checkbox3'), document.getElementById('b_checkbox3'), '#CCFFCC', '3');">
<td class="accept" id="phrase_a" onMouseOver="bg_phrase('phraseall', '#CCFFCC');"
onMouseOut="bg_phrase_out('phraseall', '#FFFFFF');">
<input type="checkbox" class="a_checkbox" id="a_select_all" name="select_all[]" value="select_all" onclick="select_all(this, 'a_checkbox', 'b_checkbox', '4', '#CCFFCC');" /></td> <td class="locked" id="phrase_l" onMouseOver="bg_phrase('phraseall', '#FFCCCC');"
onMouseOut="bg_phrase_out('phraseall', '#FFFFFF');">
<input type="checkbox" class="b_checkbox" id="b_select_all" name="select_all[]" value="select_all" onclick="select_all(this, 'b_checkbox', 'a_checkbox', '4', '#FFCCCC');" /></td> <td class="phrase" id="phrase_p" onMouseOver="bg_phrase('phraseall', '#CCFFCC');"
onMouseOut="bg_phrase_out('phraseall', '#FFFFFF');"
onclick="select_all2(document.getElementById('a_select_all'), 'a_checkbox', 'b_checkbox', '4', '#CCFFCC');">
[JavaScript] Formularz z Checkboxami - kolorowe tła
