Autor Zpráva
Stepanka
Profil *
#1 · Zasláno: 30. 11. 2008, 18:35:29
Odpovědět Citovat
Ahoj,

prosím neporadil by mi někdo s jedním problémem?

Mám takovou velkou tabulku checkboxů. Vyrobila jsem i živou ukázku - ZDE

Potřebovala bych, aby byla v té tabulce možnost nejen vybrat všechny checkboxy v daném ŘÁDKU (kliknutím na jméno nějaké osoby v první buňce), ale aby byly také checkboxy v prvním řádku (ID, login, name, ...) a aby po kliknutí na ně se označily zase všechny buňky v daném SLOUPCI, tzn. všechny loginy, všechny jména, všechny e-maily, atd..

Akorát vůbec nevím, jak by se toho dalo docílit.. Nepomohl by mi, prosím, někdo?

Kód vypadá takto:

TABULKA: 

echo '<b>Exporting of individual items to XLS</b><br />
<form method="post" action="">';
echo '<table class="export">';
echo '<tr>	<th>Person</th>
			<th>ID</th>
			<th>login</th>
			<th>Name</th>
			<th>Surname</th>
			<th>E-mail</th>
			<th>Country</th>
			<th>Affiliation 1</th>
			<th>Affiliation 2</th>
			<th>Position</th>
			<th>Date of arrival</th>
			<th>Date of departure</th>
			<th>Vegetarian</th>
			<th>Special wishes</th>
			<th>Participation</th>
			<th>Authors</th>
			<th>Title</th>
			<th>DOC File</th>
			<th>PDF File</th>
			<th>TEX File</th>
			</tr>';

$query = mysql_query("SELECT * FROM participants");

$k=0; $n=0;
while ($row = mysql_fetch_array($query)) {
	
	echo '<tr id="g'.$n.'"> 
	<th><label for="x'.$n.'" style="width:100%;height:100%;display:block;"><nobr><input type="checkbox" id="x'.$n.'" onclick="SelectAllFromGroup(this.checked, \'g'.$n.'\')" />
	'.$row['name'].' '.$row['surname'].'<nobr></label></th>
	
	<td><label for="a'.$k.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this);" id="a'.$k.'" name="id['.$k.']" value="'.$row['id'].'"></label></td>
	<td><label for="b'.$k.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this);" id="b'.$k.'" name="login['.$k.']" value="'.$row['login'].'"></label></td>
	<td><label for="c'.$k.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="c'.$k.'" name="name['.$k.']" value="'.$row['name'].'"></label></td>
	<td><label for="d'.$k.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="d'.$k.'" name="surname['.$k.']" value="'.$row['surname'].'"></label></td>
	<td><label for="e'.$k.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="e'.$k.'" name="email['.$k.']" value="'.$row['email'].'"></label></td>
	<td><label for="f'.$k.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="f'.$k.'" name="country['.$k.']" value="'.$row['country'].'"></label></td>
	<td><label for="h'.$k.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="h'.$k.'" name="affiliation1['.$k.']" value="'.$row['affiliation1'].'"></label></td>
	<td><label for="ch'.$k.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="ch'.$k.'" name="affiliation2['.$k.']" value="'.$row['affiliation2'].'"></label></td>	
	<td><label for="i'.$k.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="i'.$k.'" name="position['.$k.']" value="'.$row['position'].'"></label></td>
	<td><label for="j'.$k.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="j'.$k.'" name="departure_from['.$k.']" value="'.$row['departure_from'].'"></label></td>
	<td><label for="k'.$k.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="k'.$k.'" name="departure_to['.$k.']" value="'.$row['departure_to'].'"></label></td>
	<td><label for="l'.$k.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="l'.$k.'" name="vegetarian['.$k.']" value="'.$row['vegetarian'].'"></label></td>
	<td><label for="m'.$k.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="m'.$k.'" name="special_wishes['.$k.']" value="'.$row['special_wishes'].'"></label></td>
	<td><label for="n'.$k.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="n'.$k.'" name="participation['.$k.']" value="'.$row['participation'].'"></label></td>	
	<td><label for="o'.$k.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="o'.$k.'" name="authors['.$k.']" value="'.$row['authors'].'"></label></td>
	<td><label for="p'.$k.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="p'.$k.'" name="title['.$k.']" value="'.$row['title'].'"></label></td>
	<td><label for="q'.$k.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="q'.$k.'" name="doc['.$k.']" value="'.$row['doc'].'"></label></td>
	<td><label for="r'.$k.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="r'.$k.'" name="pdf['.$k.']" value="'.$row['pdf'].'"></label></td>
	<td><label for="s'.$k.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="s'.$k.'" name="tex['.$k.']" value="'.$row['tex'].'"></label></td>
	</tr>';
	$k++; $n++;
}
  
echo '</table>
<br /><input type="submit" name="submit2" value="Export" class="tlacitko">
</form>';


A zde je JS: 

function SelectAllFromGroup( state, gID ) {

	var group = document.getElementById( gID );

	var inputs = group.getElementsByTagName( 'input' );

	for ( var i = 1; i < inputs.length; i++ ) {

		if ( inputs[i].type == 'checkbox' ) {

			inputs[i].checked = state;

			inputs[i].parentNode.style.backgroundColor = "#99CCFF";

			if (inputs[i].checked == false) {

				inputs[i].parentNode.style.backgroundColor = "white"; 

			}

		}

	}

}



function check(obj) {

  if (obj.checked == true) { // odskrtnuti

    obj.parentNode.style.backgroundColor = "#99CCFF"; 

  } else { // zaskrtnuti

    obj.parentNode.style.backgroundColor =
Greeg
Profil
#2 · Zasláno: 1. 12. 2008, 10:55:42
Odpovědět Citovat
mozno nie jednoduchsie, ale urcite prehladnejsie by bolo nasadit tu js framework. o chvilku napisem riesenie...
Stepanka
Profil *
#3 · Zasláno: 1. 12. 2008, 10:57:36
Odpovědět Citovat
Greeg
Jj, budu moc vděčná.. Díky.
Greeg
Profil
#4 · Zasláno: 1. 12. 2008, 12:17:58
Odpovědět Citovat
skusil som to teda s FW jQuery, ktory je asi najjednoduchsi na pochopenie.
ukazka - http://www.poriesene.com/filebordel/tabulka.html

nutnostou je akurat mat zo stranky nalinovany balicek jQuery, viz komentare v kode.

snad tento priklad pomoze ;)
joe
Profil
#5 · Zasláno: 1. 12. 2008, 12:34:34
Odpovědět Citovat
Stepanka
Myslím, že by to mělo fungovat i takhle. Ke každé buňce v tabulce přiřadíš třídu (a-s). Pak po kliknutí na jméno označíš všechny checkboxy na daném řádku s třídou a-s. Po kliknutí na název sloupce označíš všechny, které mají právě tu třídu, kam se kliklo. Sice tam přibyde jedna třída, ale co, nikomu se nic nestane :) To bylo první co mě napadlo. Nemam rád používání zbytečně velkých knihoven na celkem jednoduchou věc - viz. Greeg a jeho jQuery.
Stepanka
Profil *
#6 · Zasláno: 1. 12. 2008, 12:52:15
Odpovědět Citovat
joe
„Ke každé buňce v tabulce přiřadíš třídu (a-s). Pak po kliknutí na jméno označíš všechny checkboxy na daném řádku s třídou a-s. Po kliknutí na název sloupce označíš všechny, které mají právě tu třídu, kam se kliklo.“
Abych řekla pravdu, tak tady z toho jsem celkem jelen :-) .. Nešlo by to napsat trošku srozumitelněji, prosím?


Greeg
Moc děkuju za radu.
bohyn
Profil
#7 · Zasláno: 1. 12. 2008, 13:19:00 · Upravil/a: bohyn
Odpovědět Citovat
Stepanka
Kdyz jednotlivym checkboxum nastavis id jako souradnice X,Y (treba "id10x12") tak muses sloupce i radky prochazet pres souradnice.
bohyn
Profil
#8 · Zasláno: 1. 12. 2008, 13:25:43
Odpovědět Citovat
Stepanka
Popripade prochazet tabulku pres DOM a cislo radky + cislo sloupce
Stepanka
Profil *
#9 · Zasláno: 1. 12. 2008, 15:36:10
Odpovědět Citovat
bohyn
To mě taky předtím napadlo, ale nasadit mi to nešlo... nevěděla jsem (a doposud nevím) jak javascriptu oznámit, aby označil checkboxy, které v ID OBSAHUJÏ řetězec např. 10, vždycky bylo potřeba uvádět celé ID toho checkboxu, ne jen část... Nešel by uvést konkrétní příklad, jak toho docílit? Děkuju..
bohyn
Profil
#10 · Zasláno: 1. 12. 2008, 16:03:22
Odpovědět Citovat
Stepanka
ID zjistis z cyklu + parametr fce: 
function oznacSloupec(sloupec) {
  var tabulka = document.getElementById("moje_tabulka");

  for(var i = 1; i < tabulka.rows.length; i++) {
    tabulka.getElementById("id" + sloupec + "x" + i).checked = true;
  }  
}

// nebo:

function ocnazSloupec2(sloupec) {
  var tabulka = document.getElementById("moje_tabulka");

  for(var i = 1; i < tabulka.rows.length; i++) {
    tabulka.rows[i].cells[sloupec].firstChild.firstChild.checked = true;
  }  
}
Stepanka
Profil *
#11 · Zasláno: 1. 12. 2008, 16:45:24
Odpovědět Citovat
Greeg
řekla jsem si, že vyzkouším Tvůj kód a celkem mile mě překvapil, není to nic velkého ani složitého. Akorát nějakým záhadným způsobem se mi při označení celého jednoho řádku označí úplně celá stránka a všechny checkboxy, co na ní vůbec existují.. Nevíš čím to může být?
Stepanka
Profil *
#12 · Zasláno: 1. 12. 2008, 17:25:03
Odpovědět Citovat
Greeg
A ještě jsem zjistila, že ten kód v IE vůbec nefunguje..
joe
Profil
#13 · Zasláno: 1. 12. 2008, 17:41:55
Odpovědět Citovat
Stepanka
Psal jsem to narychlo před odchodem :) Teď když vidím znova ten tvůj kód, ty třídy co jsem navrhoval by byly zbytečné. Lepší nápad než napsal bohyn asi nevymyslím. To co jsem myslel, by bylo na podobném principu, jen by se musely procházet asi všechny checkboxy v tabulce a porovnavat, jestli má danou třidu... ale když tam je to id, tak když tam uložíš ty souřadnice, pak už to není tak těžké.
Stepanka
Profil *
#14 · Zasláno: 1. 12. 2008, 17:52:27
Odpovědět Citovat
Dobře, mám teda jednu buňku v tabulce takovouto: 

<td><label for="'.$k.'x'.$n.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this);" id="'.$k.'x'.$n.'" name="id['.$k.']" value="'.$row['id'].'"></label></td>


Tu JS funkci jsem upravila takto: 

function oznacSloupec(sloupec) {
  var tabulka = document.getElementById("tabulka");
  for(var i = 1; i < tabulka.rows.length; i++) {
    tabulka.getElementById(sloupec + "x" + i).checked = true;
  }  
}


A teď chci mít v úplně první řadě ty buňky s checkboxy, které mi označí celý sloupec v tabulce. Nevím ale jak se přes tu funkci odkazovat.. Jedna z buněk v úplně první řadě je takováto: 

<th><input type="checkbox" onclick="oznacSloupec(A CO SEM?)" />&nbsp;ID</th>


Poradíte ještě, please?
bohyn
Profil
#15 · Zasláno: 1. 12. 2008, 18:03:56
Odpovědět Citovat
Stepanka
sloupec = cislo sloupce tedy $k

- id by nemelo zacinat cislem
Stepanka
Profil *
#16 · Zasláno: 1. 12. 2008, 18:15:01
Odpovědět Citovat
Já už u toho asi sedím dlouho, nebo co.. Vidíte tam někdo chybu? 

$k=0; $n=0;
echo '<br /><br /><br /><fieldset><legend><b>Exporting of individual items to XLS</b></legend><br />
<form method="post" action="">';
echo '<table class="export" id="tabulka">';
echo '<tr>	<th><input type="checkbox" onclick="oznacSloupec(\"'.$k.'\")" />ID</th>
			<th>...</th>
	</tr>';

$query = mysql_query("SELECT * FROM participants");


while ($row = mysql_fetch_array($query)) {
	
	echo '<tr id="g'.$n.'"> 
	<th><label for="x'.$n.'" style="width:100%;height:100%;display:block;"><nobr><input type="checkbox" id="x'.$n.'" onclick="SelectAllFromGroup(this.checked, \'g'.$n.'\')" />
	'.$row['name'].' '.$row['surname'].'<nobr></label></th>';
	
	echo '
	<td><label for="x'.$k.'y'.$n.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this);" id="x'.$k.'y'.$n.'" name="id['.$k.']" value="'.$row['id'].'"></label></td>
	<td>...</td>
	</tr>';
	$k++; $n++;
}
  
echo '</table>';


JS: 

function oznacSloupec(sloupec) {
  var tabulka = document.getElementById("tabulka");
  for(var i = 1; i < tabulka.rows.length; i++) {
    tabulka.getElementById("x" + sloupec + "y" + i).checked = true;
  }  
}
bohyn
Profil
#17 · Zasláno: 1. 12. 2008, 18:37:13
Odpovědět Citovat
Stepanka
Zda se mi to nebo maji vsechny checkboxy v radce stejne id?
Stepanka
Profil *
#18 · Zasláno: 1. 12. 2008, 18:42:11
Odpovědět Citovat
bohyn
Nezdá, to byla fakt blbost... Ale teď jsem to upravila do smysluplnější podoby... Jen ty sloupce se pořád neoznačují: 

$r=0;

echo '<br /><br /><br /><fieldset><legend><b>Exporting of individual items to XLS</b></legend><br />

<form method="post" action="">';

echo '<table class="export" id="tabulka">';

echo '<tr>	<th>Person</th>

			<th style="text-align:center;"><input type="checkbox" onclick="oznacSloupec(\'1\')" /><br />ID</th>

			<th style="text-align:center;"><input type="checkbox" onclick="oznacSloupec(\'2\')" /><br />Login</th>

			<th style="text-align:center;"><input type="checkbox" onclick="oznacSloupec(\'3\')" /><br />Name</th>

			<th style="text-align:center;"><input type="checkbox" onclick="oznacSloupec(\'4\')" /><br />Surname</th>

			<th style="text-align:center;"><input type="checkbox" onclick="oznacSloupec(\'5\')" /><br /><nobr>E-mail</nobr></th>

			<th style="text-align:center;"><input type="checkbox" onclick="oznacSloupec(\'6\')" /><br />Country</th>

			<th style="text-align:center;"><input type="checkbox" onclick="oznacSloupec(\'7\')" /><br /><nobr>Affiliation 1</nobr></th>

			<th style="text-align:center;"><input type="checkbox" onclick="oznacSloupec(\'8\')" /><br /><nobr>Affiliation 2</nobr></th>

			<th style="text-align:center;"><input type="checkbox" onclick="oznacSloupec(\'9\')" /><br />Position</th>

			<th style="text-align:center;"><input type="checkbox" onclick="oznacSloupec(\'10\')" /><br /><nobr>Date of arrival</nobr></th>

			<th style="text-align:center;"><input type="checkbox" onclick="oznacSloupec(\'11\')" /><br /><nobr>Date of departure</nobr></th>

			<th style="text-align:center;"><input type="checkbox" onclick="oznacSloupec(\'12\')" /><br />Vegetarian</th>

			<th style="text-align:center;"><input type="checkbox" onclick="oznacSloupec(\'13\')" /><br /><nobr>Special wishes</nobr></th>

			<th style="text-align:center;"><input type="checkbox" onclick="oznacSloupec(\'14\')" /><br />Participation</th>

			<th style="text-align:center;"><input type="checkbox" onclick="oznacSloupec(\'15\')" /><br />Authors</th>

			<th style="text-align:center;"><input type="checkbox" onclick="oznacSloupec(\'16\')" /><br />Title</th>

			<th style="text-align:center;"><input type="checkbox" onclick="oznacSloupec(\'17\')" /><br /><nobr>DOC File</nobr></th>

			<th style="text-align:center;"><input type="checkbox" onclick="oznacSloupec(\'18\')" /><br /><nobr>PDF File</nobr></th>

			<th style="text-align:center;"><input type="checkbox" onclick="oznacSloupec(\'19\')" /><br /><nobr>TEX File</nobr></th>

			</tr>';



$query = mysql_query("SELECT * FROM iscami_participants");





while ($row = mysql_fetch_array($query)) {

	

	echo '<tr id="g'.$r.'"> 

	<th><label for="xx'.$r.'" style="width:100%;height:100%;display:block;"><nobr><input type="checkbox" id="xx'.$r.'" onclick="SelectAllFromGroup(this.checked, \'g'.$r.'\')" />

	'.$row['name'].' '.$row['surname'].'<nobr></label></th>';

	



	echo '

	<td><label for="x1y'.$r.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this);" id="x1y'.$r.'" name="id['.$r.']" value="'.$row['id'].'"></label></td>

	<td><label for="x2y'.$r.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this);" id="x2y'.$r.'" name="login['.$r.']" value="'.$row['login'].'"></label></td>

	<td><label for="x3y'.$r.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="x3y'.$r.'" name="name['.$r.']" value="'.$row['name'].'"></label></td>

	<td><label for="x4y'.$r.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="x4y'.$r.'" name="surname['.$r.']" value="'.$row['surname'].'"></label></td>

	<td><label for="x5y'.$r.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="x5y'.$r.'" name="email['.$r.']" value="'.$row['email'].'"></label></td>

	<td><label for="x6y'.$r.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="x6y'.$r.'" name="country['.$r.']" value="'.$row['country'].'"></label></td>

	<td><label for="x7y'.$r.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="x7y'.$r.'" name="affiliation1['.$r.']" value="'.$row['affiliation1'].'"></label></td>

	<td><label for="x8y'.$r.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="x8y'.$r.'" name="affiliation2['.$r.']" value="'.$row['affiliation2'].'"></label></td>	

	<td><label for="x9y'.$r.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="x9y'.$r.'" name="position['.$r.']" value="'.$row['position'].'"></label></td>

	<td><label for="x10y'.$r.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="x10y'.$r.'" name="departure_from['.$r.']" value="'.$row['departure_from'].'"></label></td>

	<td><label for="x11y'.$r.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="x11y'.$r.'" name="departure_to['.$r.']" value="'.$row['departure_to'].'"></label></td>

	<td><label for="x12y'.$r.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="x12y'.$r.'" name="vegetarian['.$r.']" value="'.$row['vegetarian'].'"></label></td>

	<td><label for="x13y'.$r.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="x13y'.$r.'" name="special_wishes['.$r.']" value="'.$row['special_wishes'].'"></label></td>

	<td><label for="x14y'.$r.'" style="width:100%;height:100%;display:block;"><input type="checkbox" onclick="check(this)" id="x14y'.$r.'" name="participation['.$r.']" value="'.$row['participation'].'"></label></td>	

	<td><label for="x15y'.$r.'" st
Stepanka
Profil *
#19 · Zasláno: 1. 12. 2008, 19:14:48
Odpovědět Citovat
bohyn
Tak už nic, zkusila jsem použít tu druhou JS funkci, kterou jsi mi tu předtím napsal a s tou to krásně funguje :-)
Děkuju moc.
bohyn
Profil
#20 · Zasláno: 1. 12. 2008, 19:46:46
Odpovědět Citovat
Stepanka
No ja bych to taky resil tou druhou, hlavne proto ze bych se zbavil tech ID :)
Stepanka
Profil *
#21 · Zasláno: 1. 12. 2008, 20:42:50
Odpovědět Citovat
bohyn
Ale těch ID se nemůžu zbavit, když mám u checkboxů labely, ne?
bohyn
Profil
#22 · Zasláno: 2. 12. 2008, 15:01:42
Odpovědět Citovat
Stepanka
Pokud je dany prvek uvnitr labelu tak neni treba ID zadavat.
Tohle bude fungovat bez problemu 
<label>Pole: <input name="pole"></label>
Stepanka
Profil *
#23 · Zasláno: 2. 12. 2008, 17:08:33
Odpovědět Citovat
bohyn
No nevím, to Ti funguje všude? Já když ID oddělám, tak IE label ignoruje.. FF a Opera s tím problémy nemají.
joe
Profil
#24 · Zasláno: 2. 12. 2008, 17:17:23
Odpovědět Citovat
Stepanka
V IE to nejde, nevim jak jsou na tom nové verze, ale raději tam nech ty id ;-)
bohyn
Profil
#25 · Zasláno: 2. 12. 2008, 18:10:31
Odpovědět Citovat
Stepanka, joe
Dik za upozorneni, ani sem nevsim ze to v IE nefunguje. Vyzkousim az se k IE dostanu.
Časová prodleva: 15 let

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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

0