Autor Zpráva
RPG
Profil
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 *
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
jakpsatweb - javascript - priklady
jakpsatweb - javascript - priklady - formulare
RPG
Profil
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
"že mají checkboxy i řádky jednu společnou věc: id."

Chcete rict, ze dva prvky tam maji stejne id? Leo
los
Profil *
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
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
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 ...
RPG
Profil
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.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: