selezione della riga

[Urbanus]

Ciao a tutti , allora :

ho creato tramite php una tabella che mi contiene dei dati

ora tramite css ho fatto in modo che al passaggio del mouse su una riga questa si evidenziasse con un colore diverso (e fin qui tutto ok)

<table class="x" width="100%" class="odr1" cellspacing="0" cellpadding="0">
    <tr>
        <th class="odr2b" width="55%">Nome</th>
        <th class="odr2b" width="10%"><center>Cod</th>
        <th class="odr2b" width="10%"><center>Prov</th>
        <th class="odr2b" width="25%"><center>Vedi spedizioni</th>
    </tr>
..... 

il css che produce questo effetto è:

.x tr:hover td{ 	background-color: #00016C; 	color: #F4F4F4; }

ora però dato che la tabella è molto estesa anche orizzontalmente (è contenuta in un div) se mi posto con la barra perdo la riga che ho selezionato precedentemente...

come faccio a far vedere quale riga ho selezionato??? (con un click???)

non so se avete presente PHPmyadmin ... il programma mostra le varie righe delle tabelle, al passaggio del mouse la riga si evidenzia in verde ma se la seleziono con un clic diventa arancione...

come si fa questo ????

grazie per l' aiuto

[axxe16]

Ciao,
credo che per te sia più utile utilizzare jQuery. Per formattare le tabelle è decisamente molto utile. Nel tuo caso specifico dovrebbero bastare un paio di righe

$(document).ready(function(){
    $("tr").toggle(function(){
        $(this).addClass('hilight');
        },function(){
        $(this).removeClass('hilight');
  });
});

prepari una classe hilight:

.hilight {background-color: #00016C; 	color: #F4F4F4;}

In questo modo la applici cliccando una volta sulla riga e la rimuovi cliccandoci nuovamente. Se vuoi comportamenti più complessi jquery fornisce ottimi plugin pensati appoitamente per formattare in modo dinamico le tabelle
http://plugins.jquery.com/project/Plugins/category/54

Questo dovrebbe fare al caso tuo:
http://franca.exofire.net/js/stripes_plugin.html


Spero di esserti stato utile

[Urbanus]

infatti... stavo scrivendo che in alcune pagine utilizzo jquery e quindi chiedevo una mano in quel senso....

ora guardo i tuoi link...
intanto grazie...

[Urbanus]

:master: :master: :master: no.... non ci sono... sono più imbranato del solito..


allora...

1 - ho scaricato il Plugin " Colorize - jQuery Table Plugin " bene
2 - nella pagina dove ho la tabella ho messo la funzione

$(document).ready(function(){
    $("tr").toggle(function(){
        $(this).addClass('hilight');
        },function(){
        $(this).removeClass('hilight');
  });
});

3 - nel css ho messo la classe .hilight

4 - nella pagina clienti.php ho incluso la libreria jquery , il plugin , il css relativo

5 bene e ora il codice??? tabella ???
aiuto!!! ...



l' effetto di evidenziare la riga al passaggio del mouse l' ho fatto tramite css (che però non funzia con IE

[Urbanus]

diciamo che vorrei ottenere lo stesso effetto dell' esempio che mi ha presentato solo con le seg. variazioni:

1 - solo una riga può essere selezionata
2 - le righe devono avere colori alternati (bianco / grigio ad esempio)

è possibile??

[axxe16]

ciao se dai un okkio al plugin le prime righe ti danno chiare isctruzioni sul suo utilizzo. Ad esempio:

* @$('table').colorize({bgColor:'#EAF6CC', hoverColor:'green', hiliteColor:'red', columns:true, banColumns:[4,5,8]});

Per avere una sola riga puoi usare il bliugin in questo modo:

$('#nometabella').colorize( {oneClick:true});

bgcolor ecc ti servono per gestire i colori differenti.
Per gestire i colori alternati c'è poi altColor.
Ad ogni modo le prime righe del plugin ti dicono tutto quello che devi sapere

[Urbanus]

grazie mille... funziona tutto a meraviglia.....

grazie ancora...
ciao

[Urbanus]

bene funziona benissimo...

però ora esagero e rompo le b... fino all' ultimo...

sarebbe possibile a questa tabella aggiungere anche l' effetto di ordinamento (tamite i TH)???

e ... e... e. magari decidere quali th non rendere ordinabili...

ovvero

<table class="x" width="100%" class="odr1" cellspacing="0" cellpadding="0">
    <tr>
        <th width="55%">Nome</th> <-- ordinabile
        <th width="10%"><center>Cod</th> <-- ordinabile
        <th width="10%"><center>Prov</th> <-- ordinabile
        <th width="25%"><center>Vedi spedizioni</th> <-- NON ORDINABILE ordinabile
    </tr> 

(ho trovato un esempio qui su html.... ma se appllico questo (funzionante al 100%) perdo il discorso di evidenziare le righe ed evidenziare quella selezionata .. non riesco a far convivere i 2 script...

puoi/potete aiutarmi??

grazie

[Gufo]

Solo una piccola precisazione, è più corretto usare td e non th

[Urbanus]

ciao.. per l' ordinamento ho trovato il plugin per jquery "tablesorter" con tanto di esempio con alcune colonne non ordinabili:

<script type="text/javascript" id="js">$(document).ready(function() {
	$("table").tablesorter({
		// pass the headers argument and assing a object
		headers: {
			// assign the secound column (we start counting zero)
			1: {
				// disable it by setting the property sorter to false
				sorter: false
			},
			// assign the third column (we start counting zero)
			2: {
				// disable it by setting the property sorter to false
				sorter: false
			}
		}
	});
});</script>

<table cellspacing="1" class="tablesorter">

e funziona.... ma non riesco a far "convivere" i 2 script insieme.. o mi tengo la tabella ordinabile oppure evidenzio le righe ..

il problema che il plugin per il sort ha bisogno di un css (che a questo punto credo vada in conflitto con il $('#tbc').colorize)

ecco il css:

/* tables */
table.tablesorter {
    font-family:arial;
    background-color: #CDCDCD;
    margin:10px 0pt 15px;
    font-size: 8pt;
    width: 100%;
    text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #e6EEEE;
    border: 1px solid #FFF;
    font-size: 8pt;
    padding: 4px;
}
table.tablesorter thead tr .header {
    background-image: url(bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter tbody td {
    color: #3D3D3D;
    padding: 4px;
    background-color: #FFF;
    vertical-align: top;
}
table.tablesorter tbody tr.odd td {
    background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
    background-image: url(asc.gif);
}
table.tablesorter thead tr .headerSortDown {
    background-image: url(desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
} 

potete aiutarmi??