Selezionare Checkbox Cliccando Sulla Riga O Cella

[funnylux]

Ciao Ragazzi sto cercando di capire come fare ad selezionare un checkbox anche con un click sulla riga o sulla cella, una cosa simile a phpmyadmin non so se avete presente?

[Xinod]

l' avevo postato qualche settimana fa
e' proprio un abbozzo, molto migliorabile, ma fa quello che chiedi

function funz(e,idx){
	var el=document.getElementById(idx);
	if(!e) e=window.event;
	var source=(e.target)?e.target:e.srcElement;
	if(source.tagName=='TD'){
		el.checked=!el.checked;
	}
}

<td onclick="funz(event,'ch1')">
<input id="ch1" type="checkbox"><label for="ch1">etichetta</label>
</td>

ciao

[funnylux]

Grazie tante.
Adesso penso sia possibile far cambiare classe alla cella o alla riga per dare un effetto di evidenziatura?

[Xinod]

si fa, con un approccio un po' diverso

<style type="text/css">
table {width:100%;border-collapse:collapse;}
td {background-color:#ccc}
td.on {background-color:#666}
</style>
<script type="text/javaScript">
function evidenziaTd(ck){
	var flag=ck.checked
	while(ck=ck.parentNode){
		if(ck.tagName=='TD'){
			ck.className=(flag)?'on':'';
		}
	}
}
window.onload=function(){
	var t=document.getElementById('tabella');
	t.onclick=function(e){
		e=e||event;
		var src=e.target||e.srcElement;
		if(src.tagName=='INPUT' && src.type=='checkbox'){
			evidenziaTd(src);
		}
		else {
			if(src.tagName!='LABEL'){
				var found=true;
				while(src.tagName!='TD'){
					if(src==t){found=false; break;}
					src=src.parentNode;
				}
				if(found){
					var els=src.getElementsByTagName('input');
					for(var k=0,l=els.length;k<l;k++){
						if(els[k].type=="checkbox"){
							els[k].checked=!els[k].checked;
							evidenziaTd(els[k]);
						}
					}
				}
			}
		}

	}
}
</script>

<form>
<table id="tabella">
<tbody>
  <tr>
    <td><input id="ch1" type="checkbox"><label for="ch1">check 1</label></td>
    <td>testo vario</td>
  </tr>
  <tr>
    <td><input id="ch2" type="checkbox"><label for="ch2">check 2</label></td>
    <td><input id="ch3" type="checkbox"><label for="ch3">check 3</label></td>
  </tr>
</tbody>
</table>
</form>

per spiegazioni su quanto sopra sono a disposizione,
per ulteriori modifiche no, altrimenti ti tolgo tutto il divertimento
ciao

[funnylux]

.. ok l'ho modificato ed adattato per il tag TR, però ora c'è un problema.. anzi 2
le righe sono di colore alternato, quindi quando levo la spunta il colore della riga non viene pescato più, poi l'altro problema è che ho i tasti seleziona e deseleziona tutto che ovviamente non mi evidenziano la riga

function evidenziaTd(ck){
    var flag=ck.checked
    while(ck=ck.parentNode){
        if(ck.tagName=='TR'){
            ck.className=(flag)?'on':'';
        }
    }
}
window.onload=function(){
    var t=document.getElementById('tabelladati');
    t.onclick=function(e){
        e=e||event;
        var src=e.target||e.srcElement;
        if(src.tagName=='INPUT' && src.type=='checkbox'){
            evidenziaTd(src);
        }
        else {
            if(src.tagName!='LABEL'){
                var found=true;
                while(src.tagName!='TR'){
                    if(src==t){found=false; break;}
                    src=src.parentNode;
                }
                if(found){
                    var els=src.getElementsByTagName('input');
                    for(var k=0,l=els.length;k<l;k++){
                        if(els[k].type=="checkbox"){
                            els[k].checked=!els[k].checked;
                            evidenziaTd(els[k]);
                        }
                    }
                }
            }
        }

    }
}

function SelezTT()
{
    var i = 0;
    var modulo = document.modulo.elements;
    for (i=0; i<modulo.length; i++)
    {
        if(modulo[i].type == "checkbox")
        {
            modulo[i].checked = !(modulo[i].checked);
        }
    }
} 

PAGINA

<?
include("../../inclusioni/inclusioni.php");
include("top_sezione.php");
$nome_tab = "guest";
$form = "exe.php";
include("../../inclusioni/prepag.php");
?>
<form action="<? echo $form;?>" method="get" name="modulo">
<input value="<?echo $_REQUEST['pag'];?>" type="hidden" name="pag" />
<?include("../../inclusioni/menu.php");?>
Dati trovati: [b]<? echo $all_rows;?>[/b]
<?
$result = mysql_query("SELECT * FROM $nome_tab ORDER by ID desc LIMIT $first, $x_pag") 
or die("Query non valida: " . mysql_error()); 
?>
<table id="tabelladati">
<tr> 
<th>OPZIONE</th> 
<th>ID</th> 
<th>NOME</th>
<th>CITTA'</th>
<th>E-MAIL</th>
<th>WWW</th>
<th>DATA</th> 
<th>IP</th> 
<th>VISIBILITA'</th> 
</tr>
<?
// CICLO RECORD DB
while($row = mysql_fetch_array( $result )) {
    alternate_color();
    // STAMPO IL CONTENUTO
$chbox = $chbox + 1;
?>    
    <tr class="<?echo $color?>"> 
    <td><input value="<?echo $row["id"];?>" type="checkbox" name="id[]" id="ch<?echo $chbox;?>"class="chk" />
    <label for="ch<?echo $chbox;?>"><?echo $chbox;?></label>
    </td>
    <td ><?echo $row["id"];?></td>
    <td><?echo $row["guest_nome"];?></td>
    <td><?echo $row["guest_citta"];?></td>
    <td><?echo $row["guest_mail"];?></td>
    <td><?echo $row["guest_url"];?></td>
    <td><?echo $row["guest_data"];?></td>
    <td><?echo $row["guest_ip"];?></td>
    <td>
    <? if ($row["guest_condizione"] == 1){ ?>
    [img]../../theme/images/abilitato.png[/img]
    <?}else{?>
    [img]../../theme/images/disabilitato.png[/img]
    <?}?>
    </td>
    
    </tr> 
<?
} 
?>
</table>
<?include("../../inclusioni/menu.php");?>
</form>
<?
include("../../inclusioni/pag.php");
include("../../theme/foot.php");
include("../../db/conn_close.php");?>

[funnylux]

Praticamente devo cercare di capire come inviare allo script la classe cliccata per poi una volta in caso di "deselezione" rimettere la classe originale.. altrimenti in questo modo viene tolta.. ma non so come si fa!! help

<style type="text/css">
table {width:100%;border-collapse:collapse;}
tr.cell1 {background-color:#ccc}
tr.cell2 {background-color:#999}
tr.cell8 {background-color: #808000
}

tr.on {background-color:#666}
</style>
<script type="text/javaScript">
function evidenziaTd(ck){
	var tr_var=ck.className
	var flag=ck.checked
	while(ck=ck.parentNode){
		if(ck.tagName=='TR'){
			ck.className=(flag)?'on':'cell8';
		}
	}
}
window.onload=function(){
	var t=document.getElementById('tabella');
	t.onclick=function(e){
		e=e||event;
		var src=e.target||e.srcElement;
		if(src.tagName=='INPUT' && src.type=='checkbox'){
			evidenziaTd(src);
		}
		else {
			if(src.tagName!='LABEL'){
				var found=true;
				while(src.tagName!='TR'){
					if(src==t){found=false; break;}
					src=src.parentNode;
				}
				if(found){
					var els=src.getElementsByTagName('input');
					for(var k=0,l=els.length;k<l;k++){
						if(els[k].type=="checkbox"){
							els[k].checked=!els[k].checked;
							evidenziaTd(els[k]);
						}
					}
				}
			}
		}

	}
}
</script>

<form>
<table id="tabella">
<tbody>
  <tr class="cell1">
    <td><input id="ch1" type="checkbox"><label for="ch1">check 1</label></td>
  </tr>
  <tr class="cell2">
    <td><input id="ch2" type="checkbox"><label for="ch2">check 2</label></td>
  </tr>
  <tr class="cell1">
    <td><input id="ch3" type="checkbox"><label for="ch3">check 3</label></td>
  </tr>
  <tr class="cell2">
    <td><input id="ch4" type="checkbox"><label for="ch4">check 4</label></td>
  </tr>
  <tr class="cell1">
    <td><input id="ch5" type="checkbox"><label for="ch5">check 5</label></td>
  </tr>
  <tr class="cell2">
    <td><input id="ch6" type="checkbox"><label for="ch6">check 6</label></td>
  </tr>
</tbody>
</table>
</form>

[Xinod]

puoi fare in vari modi diversi
1- e' lecito applicare piu' classi ad un elemento, quindi un tr puo' avere class="class2, on",
la seconda classe avrebbe il sopravvento sulle medesime proprieta' della prima (se non sbaglio, fallisce solo su IE mac, ormai considerato defunto)

2- aggiungi la classe ai td (o a tutti i td del tr), con l' effetto di coprire il background del tr

3- aggiungi un attributo arbitrario al tr
riferimentoTr.oldClass=classePrecedente
cambi il className a on, oppure a quanto presente in oldClass per ripristinare lo stato iniziale

4- fondamentalmente il checkbox segnato o meno determina il cambio di colore
(e avere un id per ogni checkbox ti semplifica pure il procedimento)
se ogni volta che viene segnato un checkbox che non e' mai stato segnato prima aggiungi in un array creato in precedenza un
nomeArray[idCheckbox]=vecchiaClasse
quando la classe va ripristinata cicli alla ricerca dell' id del checkbox e associ al tr la vecchiaClasse

queste le prime idee che mi vengono in mente..

ciao

[funnylux]

mi sa proprio che per le mie scarsissime conoscenze in materia... non vedo via d'uscita

[Xinod]

prima opzione, la piu' semplice

function evidenziaTd(ck){
	var flag=ck.checked;
	while(ck=ck.parentNode){
		if(ck.tagName=='TR'){
			if(!flag) ck.className=ck.className.replace(' on','');
			else if(ck.className.indexOf(' on')<0) ck.className+=' on';
		}
	}
}

tutto il resto resta come hai scritto tu

[funnylux]

Grande :d grazie.. funziona..
per fare il ciclo di seleziona e deseleziona devo agire sempre sulla funzione "evidenziaTd" ?
io uso questo

function SelezTT()
{
    var i = 0;
    var modulo = document.modulo.elements;
    for (i=0; i<modulo.length; i++)
    {
        if(modulo[i].type == "checkbox")
        {
            modulo[i].checked = !(modulo[i].checked);
        }
    }
}