| Autor | Zpráva | ||
|---|---|---|---|
| RPG Profil |
#1 · Zasláno: 1. 3. 2008, 22:35:57 · Upravil/a: RPG
Dobrý den,
Hledal jsem řešení v diskusích, i na webu, ale nebyl jsem schopen žádné rozumné vysvětlení najít a už se s tím trápím přes deset hodin. Proto prosím o pomoc s tímhle problémem: Mějme tabulku hodnot, ve které každý řádek obsahuje checkbox (pro hromadné zpracování pomocí php, to ale není důležité). Nejsem schopen přijít v Javascriptu na způsob, kterým by se po zaškrtnutí checkboxu obarvil celý řádek (tj. tag <tr>), ve kterém se checkbox nachází. Ano, jsem schopen vložit ke každému checkboxu událost "onclick" (popř. "onchange") a v takovém případě to funguje hezky, ale problém nastává, pokud použiji tlačítko "zaškrni vše", které zjistí počet checkboxů, protáhne je cyklem a jeden po druhém označí. V takovém případě se řádek, pochopitelně, neobarví. Takže bych v javascriptu potřeboval, normálními slovy řečeno, zapsat něco takového: Po zaškrtnutí checkboxu obarvi řádek ve kterém se nachází. Kdo potřebuje něco "hmatatelného", může se podívat na stránku "články", zde: http://dnrs.dzuny.cz Jméno: guest Heslo: heslo Děkuji za každou radu. Doplněno: Soubor s javascriptovými funkcemi najdete tady: http://dnrs.dzuny.cz/sysfce.js Konkrétně jde o funkci "vyber". |
||
| Artie Profil * |
#2 · Zasláno: 2. 3. 2008, 01:22:07
Já bych si udělal css třídu. Něco jako
.obarven{background-color: red;} a když procházíš tím cyklem tak bych nastavil className elementu td, který chceš obarvit po nějaké podmínce, jestli je checkbox zaškrtnut. Dávám checkboxům ječtě parametr id. takže podmínka v cyklu: <input type="checkbox" value="49" name="clanky[]" id="nejake_id_1" /> if(document.getElementById('nejake_id_1').checked == true)document.getElementById('nejake_id_1').className = "obarven"; A to samé i po tom onclick. onclick="this.className = 'obarven';" |
||
| peta Profil |
#3 · Zasláno: 2. 3. 2008, 09:34:14
jakpsatweb - javascript - priklady
jakpsatweb - javascript - priklady - formulare |
||
| RPG Profil |
#4 · Zasláno: 2. 3. 2008, 10:15:52 · Upravil/a: RPG
No samozřejmě, třídu jsem přiděloval, ale problém je v tom, že se nemám jak dostat k <tr>. Jejich ID jsou dynamicky generovány z databáze.
f(document.getElementById('nejake_id_1').checked == true)document.getElementById('nejake_id_1').className = "obarven"; Tohle přece nastaví (v tomhle případě dokonce nenastaví, protože jde o checkboxy) pozadí inputům… onclick="this.className = 'obarven';" Tady budu muset použív funkci, protože se budou řádky po odškrtnutí zase vracet do původního stavu. peta štědrý jako vždy… nenašel jsem tam nic, co by mi pomohlo. Mám ještě pár teorií jak to provést, dál samozřejmě uvítám každou pomoc… Děkuji Doplněno: Problém vyřešen. Kdo se bude chtít podívat, najde řešení na odkazech nahoře. Jednoduše jsem využil toho, že mají checkboxy i řádky jednu společnou věc: id. Doplněno podruhé: Řádek má id o nějaké hodnotě a checkbox má value o té samé hodnotě. |
||
| Leo Profil |
#5 · Zasláno: 2. 3. 2008, 11:04:36
"že mají checkboxy i řádky jednu společnou věc: id."
Chcete rict, ze dva prvky tam maji stejne id? Leo |
||
| los Profil * |
#6 · Zasláno: 2. 3. 2008, 12:31:00
Problém je síce vyriešený (okrem pár drobností: id nesmie začínať číslicou, formulár má rovnaký identifikátor ako odkaz na články, funkcie sú silne závislé na štruktúre HTML - prvý checkbox v tabuľke musí byť tretím inputom na stránke a pod.), ale navrhujem trochu iné riešenie.
Namiesto kliknutia na checkbox by som obsluhoval kliknutie na tabuľku (zjednoduší sa kód v HTML a aj v JavaScripte). Funkcia pre zmenu štýlu riadku, v ktorom je daný checkbox, by potom vyzerala nejako takto: function updateRow(checkbox) {
for (var row = checkbox; row; row = row.parentNode)
if (row.tagName == "TR") {
row.className = checkbox.checked ? "zr" : "nr";
break;
}
}Obsluha kliknutia na tabuľku by vyzerala zhruba takto: table.onclick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
if (target.type == "checkbox")
updateRow(target)
}A obsluha stlačenia tlačidla pre zafarbenie všetkých riadkov by vyzerala asi takto: checkAll.onclick = function() {
var inputs = table.getElementsByTagName("input");
for (var i = 0, len = inputs.length; i < len; ++i)
if (inputs[i].type == "checkbox") {
inputs[i].checked = true;
updateRow(inputs[i]);
}
}(v premennej table je tabuľka s checkboxami a v premennej checkAll je tlačidlo, ktoré má zaškrtnúť všetky checkboxy) |
||
| RPG Profil |
#7 · Zasláno: 2. 3. 2008, 13:58:41 · Upravil/a: RPG
Upraveno:
Ne, Leo, tím chci říct, že řádek má id o nějaké hodnotě a checkbox má value stejné hodnoty. Špatně jsem to vyjádřil, omlouvám se. los: Mnohokrát děkuji, v Javascriptu, jak vidíte, trochu plavu. Upravím vše hned jakmile se k tomu dostanu. |
||
| peta Profil |
#8 · Zasláno: 4. 3. 2008, 08:11:14 · Upravil/a: peta
RPG
Vidim, ze jsi LEA nepochopil: if( document.getElementById('nejake_id_1').checked == true) document.getElementById('nejake_id_1').className = "obarven"; ... podle tohoto ma checkbox i TR stejne ID, coz nesmi, id je jedinecny identifikator. Pro vypis z databaze pouzivam cislovani 0..19, kde id checkboxu mam ch0..ch19, value checkboxu = id_radku, pak prace s takovym checkbox je o moc jednodussi. Jinak to lze resit pres prvek.parentNode nebo jakkoliv jinak row.parentNode - to se muzes dostat na tbody nebo table nebo jiny tabulkovy tag, zalezi na prohlizeci. Spis bych pouzil: tag_table = document.getElementById('tabulka'); tag_tbody = document.getElementsByTagName('TBODY')[0] tag_tr = document.getElementsByTagName('TR') for i=0;i<tag_tr.length ... |
||
|
Časová prodleva: 4 dny
|
|||
| RPG Profil |
#9 · Zasláno: 8. 3. 2008, 12:58:22
A kde jsi, peto, ty dva řádky vzal? Lea jsem pochopil a kód upravil… Nemusíš mi vysvětlovat význam a omezení identifikátoru.
|
||
|
Časová prodleva: 16 let
|
|||
0