Newsgroup: it.comp.lang.javascript
Titolo: Effetto di selezione multipla su celle tabella

Avete presente l'effetto che fa Google Calendar quando si crea un nuovo 
evento che dura più di un'ora? In pratica è simile a quello che fa Excel 
quando si selezionano più celle... mi piacerebbe replicare questo 
comportamento: qualcuno sa come fare?
Quello che sono riuscito a fare, per adesso, è stato identificare la 
cella di partenza (onMouseDown) e quella di arrivo (onMouseUp), e 
regolarmi di conseguenza... ma colorare le celle che ci sono nel mezzo 
mentre muovo il mouse con il pulsante premuto, proprio non so come fare 
(o forse mi sto perdendo in un bicchier d'acqua...).
-- 
Jax

 (o forse mi sto perdendo in un bicchier d'acqua...).
no di certo, non è banalissimo!

 prima pero' devo capire bene fino a che punto sei arrivato
In effetti, non l'ho fatto sull'onmouseup... sorry se ti ho "sviato" :)
-- 
Jax

 In effetti, non l'ho fatto sull'onmouseup... sorry se ti ho "sviato" :)
piů che altro non l'hai fatto con JS :(
Allora siamo messi malino, devo capire quanta ne sai di JS?
Perchč vorrei evitare di fartelo io :P
Ma delle dritte te le do' volentieri

 Ma delle dritte te le do' volentieri
Ne so un po' pochino, ma di solito mi destreggio bene tra reference e 
guide... solo che stavolta non riesco a focalizzare che tecnica č meglio 
utilizzare. Potrei assegnare un onMouseOver ad ogni cella e colorarla se 
ho settato l'id della cella iniziale (e quindi ho il mouse premuto)... 
non č una gran tecnica ma forse funziona.
Perň ho dei dubbi se per caso torno indietro alla cella precedente... 
uhm. Intanto faccio qualche prova.
-- 
Jax

 Ma delle dritte te le do' volentieri
Forse ci sono: siccome gli ID delle celle hanno una certa progressione 
(l'id della prima cella è mettiamo 0, quello della seconda è 86400, la 
terza 172800 e così via... ogni cella aumenta di 86400), potrei fare un 
ciclo nell'OnEnter/OnMouseOver (adesso vedo cosa è meglio) che, se l'id 
iniziale è settato, va a colorare la cella dall'id iniziale all'id 
corrente. Adesso ci provo e vedo se è una vaccata...
-- 
Jax

 uhm. Intanto faccio qualche prova.
Bravo così mi piaci,
e allora io ti ho buttato giù tre righe che possono iniziare a darti una
mano, poi domani ne riparliamo.
Ci sono diversi modi per farlo, ma tutto sommato se si hanno a disposizione
quegli id che dicevi, vengono proprio utili e fanno otimizzare la cosa...
Ma dal momento che tu già lo facevi fare a PHP, il metodo di determinare le
celle ce l'hai già, giusto?
ti manca solo le nozioni di JS, intanto ti do' questo che dovrebbe essere
utile per iniziare (scrive in un layer l'id della cella "iniziale" e quella
"finale"). Poi domani andiamo avanti...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
td
{
	width:100px;
}
</style>
<script type="text/javascript">
function get_cel(evt)
{
	evt = evt || event;
	var cel = evt.srcElement || evt.target || null;
	document.getElementById('output').innerHTML = 
cel.id
;
}
window.onload = function()
{
	document.getElementById('myt').onmousedown = get_cel;
	document.getElementById('myt').onmouseup = get_cel;
}
</script>
</head>
<body>
<table border="1" id="myt">
	<tr>
		<td id="86400">1</td>
		<td id="172800">2</td>
	</tr>
	<tr>
		<td id="259200">3</td>
		<td id="345600">4</td>
	</tr>
</table>
<div id="output"></div>
</body>
</html>

 "finale"). Poi domani andiamo avanti...
Ce l'ho fatta! Alla fine è stato più facile del previsto, se escludiamo 
la perdita di tempo per i problemi stupidi (perché non ci sono 
abituato), per esempio davo per scontato che js, facendo var1 = var1 + 
100 mi facesse la somma, e invece mi faceva la concatenazione :(
   function evidenzia( id_cella ) {
     var dip, giorno, giorno_iniz, giorno_fin;
     if (id_ini != "") {
       dip = id_ini.split("|")[0];
       giorno_iniz = eval(id_ini.split("|")[1]);
       giorno_fin = eval(id_cella.split("|")[1]);
       for (giorno = giorno_iniz; giorno <= giorno_fin; giorno = giorno 
+ 86400) {
         var elem = getbyID(dip + "|" + giorno);
         if (elem.className.indexOf("ferie") == -1)
	  elem.className = elem.className + " ferie";
       }
     }
   }
   function xevidenzia( id_cella ) {
     if (id_ini != "") {
       getbyID(id_cella).className = 
getbyID(id_cella).className.replace(" ferie", "");
     }
   }
(getbyID è una funzione che ho copiato che recupera l'elemento per ID a 
seconda del browser...)
Ti chiederai perché gli split... i miei ID sono nella forma 
xxx|yyyyyyyy, dove xxx è il codice del dipendente, yyyyyyyy il timestamp 
  del giorno in formato unix.
Questo metodo funziona anche se non è il massimo, lo riconosco. Funziona 
perché i miei ID seguono una progressione, altrimenti erano cazzi.
In effetti mi piacerebbe trovare una soluzione più generalizzata, anche 
se al momento non mi serve.
Domani con calma mi studio il tuo spezzone di codice: sarà l'ora ma non 
c'ho capito un granché :P
Grazie del supporto comunque!
-- 
Jax

 Grazie del supporto comunque!
de nada

 del mouse, poi vediamo qual è la strada migliore
Non ho capito. Le celle vengono già selezionate :)
-- 
Jax

 Ok, quando e se mi servirà ti farò un fischio allora :))
troppo tardi, la cosa mi ha stuzzicato e tra un po' posto quello che ho
fatto...

 fatto...
Come promesso:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
td
{
	width:100px;
}
</style>
<script type="text/javascript">
//<![CDATA[
var myTable = null;
var row = null;
var startCell = null;
var endCell = null;
function setCel( )
{
	var step = 0, color = '';
	if( startCell == endCell )
	{
		deselectAllCell( row );
	}
	else
	{
		var cells = row.getElementsByTagName('TD');
		for( var i = 0; i < cells.length; i++ )
		{
			if( cells[i] == startCell || cells[i] == endCell )
				++step;
			color = (  step == 1 ) ? '#FF0000' : '';
			cells[i].style.backgroundColor = color;
		}
	}
	startCell.style.backgroundColor = endCell.style.backgroundColor =
'#FF0000';
}
function deselectAllCell( selRow )
{
	var cells = (selRow || myTable).getElementsByTagName('TD');
	for(var i = 0; i < cells.length; i++)
		cells[i].style.backgroundColor = '';
}
function downFun( evt )
{
	evt = evt || event;
	startCell = evt.srcElement || evt.target || null;
	if( startCell && startCell.tagName == 'TD' &&
		startCell.parentNode && startCell.parentNode.tagName == 'TR' )
	{
		myTable.onmouseover = overFun;
		myTable.onmouseup = upFun;
		row = (endCell = startCell).parentNode;
		deselectAllCell( );
		setCel( );
	}
	else
	{
		startCell = endCell = row = null;
	}
}
function overFun( evt )
{
	evt = evt || event;
	endCell = evt.srcElement || evt.target || null;
	if( endCell && endCell.tagName == 'TD' && endCell.parentNode == row )
		setCel( );
}
function upFun( )
{
	myTable.onmouseup = myTable.onmouseover = null;
	startCell = endCell = row = null;
}
window.onload = function()
{
	myTable = document.getElementById('myt');
	myTable.onmousedown = downFun;
}
//]]>
</script>
</head>
<body>
<table border="1" id="myt">
	<tr>
		<td>1</td><td>2</td><td>1</td><td>2</td>
		<td>1</td><td>2</td><td>1</td><td>2</td>
	</tr>
	<tr>
		<td>3</td><td>4</td><td>3</td><td>4</td>
		<td>3</td><td>4</td><td>3</td><td>4</td>
	</tr>
	<tr>
		<td>1</td><td>2</td><td>1</td><td>2</td>
		<td>1</td><td>2</td><td>1</td><td>2</td>
	</tr>
</table>
</body>
</html>
PS
Chiaramente è un punto di inzio, non è sviluppato orientato agli oggetti
(si puo' estendere abbastanza facilmente) e usa 4 variabili globali e 3
event-handler della tabella e ne fa un uso che forse non è il migliore,
cmq...