selezionare determinate celle

**peppeweb** · 03-01-2012, 10:53

devo utilizzare un calendario annuale per la prenotazione di un determinato servizio.

La griglia viene creata da questo script in asp:

codice:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Senza nome 1</title>
<style type="text/css">
#CellaNome {
	text-align:center;
	background:#D7D7D7;
	font-family:Arial, Helvetica, sans-serif;
	font-size:xx-small;
	width:20px;
}
#CellaGiorno {
	text-align:center;
	background: #99FFCC;
	font-family:Arial, Helvetica, sans-serif;
	font-size:xx-small;
	border:1px solid #A0D0F8;
}
#CellaGiornoVuota {
	text-align:center;
	background:#F3F3F3;
	font-family:Arial, Helvetica, sans-serif;
	font-size:xx-small;	
}
#CellaMese {
	text-align:center;
	background:#F3F3F3;
	font-family:Arial, Helvetica, sans-serif;
	font-size:xx-small;	
}
</style>
</head>
<body>

<table style="width: 740px">

	<tr>
		<td></td>
		<td id="CellaNome">lu</td>
		<td id="CellaNome">ma</td>
		<td id="CellaNome">me</td>
		<td id="CellaNome">gi</td>
		<td id="CellaNome">ve</td>
		<td id="CellaNome">sa</td>
		<td id="CellaNome">do</td>
		<td id="CellaNome">lu</td>
		<td id="CellaNome">ma</td>
		<td id="CellaNome">me</td>
		<td id="CellaNome">gi</td>
		<td id="CellaNome">ve</td>
		<td id="CellaNome">sa</td>
		<td id="CellaNome">do</td>
		<td id="CellaNome">lu</td>
		<td id="CellaNome">ma</td>
		<td id="CellaNome">me</td>
		<td id="CellaNome">gi</td>
		<td id="CellaNome">ve</td>
		<td id="CellaNome">sa</td>
		<td id="CellaNome">do</td>
		<td id="CellaNome">lu</td>
		<td id="CellaNome">ma</td>
		<td id="CellaNome">me</td>
		<td id="CellaNome">gi</td>
		<td id="CellaNome">ve</td>
		<td id="CellaNome">sa</td>
		<td id="CellaNome">do</td>
		<td id="CellaNome">lu</td>
		<td id="CellaNome">ma</td>
		<td id="CellaNome">me</td>
		<td id="CellaNome">gi</td>
		<td id="CellaNome">ve</td>
		<td id="CellaNome">sa</td>
		<td id="CellaNome">do</td>
		<td id="CellaNome">lu</td>
		<td id="CellaNome">ma</td>		
	</tr>
		
	<%
	For mm = 1 to 11
	Anno 	= Year(date)
	Mese 	= mm
	DataMM	= "01/"&Mese&"/"&Anno
	DataSS 	= DateAdd("m",1,DataMM)
	MesePP  = MonthName(mm)
	Contag  = DateAdd("d",-1,DataSS)
	Contagg = DatePart("d",Contag)
	
	DataGG	= "01/"&Mese&"/"&Anno
	
	ng 		= Left(WeekDayName(WeekDay(DataGG)),3)
	
	If ng = "lun" Then
	gg	= 0
	ElseIf ng = "mar" Then
	gg	= 1
	ElseIf ng = "mer" Then
	gg	= 2
	ElseIf ng = "gio" Then
	gg	= 3
	ElseIf ng = "ven" Then
	gg	= 4
	ElseIf ng = "sab" Then
	gg	= 5
	ElseIf ng = "dom" Then
	gg	= 6
	End If
	
	cc = 37-(Contagg+gg)
	%>
	<tr>
		<td id="CellaMese"><%=Left(MesePP,3)%></td>
		
		<% For aa = 1 to gg	%>
		<td id="CellaGiornoVuota"></td>
		<% Next %>

		<% For a = 1 to Contagg	%>
		<td id="CellaGiorno"><%=a%></td>
		<% Next %>
		
		<% For aaa = 1 to cc	%>
		<td id="CellaGiornoVuota"></td>
		<% Next %>

	</tr>
	<% Next %>
	
	<%
	For mm = 12 to 12
	Anno 	= Year(date)
	Mese 	= mm
	DataMM	= "01/"&Mese&"/"&Anno
	DataSS 	= DateAdd("m",1,DataMM)
	MesePP  = MonthName(mm)
	Contag  = DateAdd("d",-1,DataSS)
	Contagg = DatePart("d",Contag)
	
	DataGG	= "01/"&Mese&"/"&Anno
	
	ng 		= Left(WeekDayName(WeekDay(DataGG)),3)
	
	If ng = "lun" Then
	gg	= 0
	ElseIf ng = "mar" Then
	gg	= 1
	ElseIf ng = "mer" Then
	gg	= 2
	ElseIf ng = "gio" Then
	gg	= 3
	ElseIf ng = "ven" Then
	gg	= 4
	ElseIf ng = "sab" Then
	gg	= 5
	ElseIf ng = "dom" Then
	gg	= 6
	End If

	cc = 37-(Contagg+gg)
	%>
	<tr>
		<td id="CellaMese"><%=Left(MesePP,3)%></td>
		
		<% For aa = 1 to gg	%>
		<td id="CellaGiornoVuota"></td>
		<% Next %>

		<% For b = 1 to 31 %>
		<td id="CellaGiorno"><%=b%></td>
		<% Next	%>
		
		<% For aaa = 1 to cc	%>
		<td id="CellaGiornoVuota"></td>
		<% Next %>

	</tr>
	<% Next %>
</table>
</body>
</html>

se io volessi selezionare alcune celle di determinati giorni e portarmeli come valori in un'altra pagina è una cosa fattibile in javascript ?

**br1** · 03-01-2012, 11:04

No ASP in questa sezione, posta solo quello che riceve il browser

ps: bellino il risultato, te lo copio

**peppeweb** · 03-01-2012, 11:11

ok,

ho messo soltanto la cella del mese di gennaio

codice:

<style type="text/css">  
#CellaNome {
	text-align:center;
	background:#D7D7D7;
	font-family:Arial, Helvetica, sans-serif;
	font-size:xx-small;
	width:20px;
} 
#CellaGiorno {
	text-align:center;
	background: #99FFCC;
	font-family:Arial, Helvetica, sans-serif;
	font-size:xx-small;
	border:1px solid #A0D0F8;
} 
#CellaGiornoVuota {
	text-align:center;
	background:#F3F3F3;
	font-family:Arial, Helvetica, sans-serif;
	font-size:xx-small;	
} 
#CellaMese {
	text-align:center;
	background:#F3F3F3;
	font-family:Arial, Helvetica, sans-serif;
	font-size:xx-small;	
} 
</style> 
 
<table style="width: 740px"> 
<tr>
<td></td>
<td id="CellaNome">lu</td>
<td id="CellaNome">ma</td>
<td id="CellaNome">me</td>
<td id="CellaNome">gi</td>
<td id="CellaNome">ve</td>
<td id="CellaNome">sa</td>
<td id="CellaNome">do</td>
<td id="CellaNome">lu</td>
<td id="CellaNome">ma</td>
<td id="CellaNome">me</td>
<td id="CellaNome">gi</td>
<td id="CellaNome">ve</td>
<td id="CellaNome">sa</td>
<td id="CellaNome">do</td>
<td id="CellaNome">lu</td>
<td id="CellaNome">ma</td>
<td id="CellaNome">me</td>
<td id="CellaNome">gi</td>
<td id="CellaNome">ve</td>
<td id="CellaNome">sa</td>
<td id="CellaNome">do</td>
<td id="CellaNome">lu</td>
<td id="CellaNome">ma</td>
<td id="CellaNome">me</td>
<td id="CellaNome">gi</td>
<td id="CellaNome">ve</td>
<td id="CellaNome">sa</td>
<td id="CellaNome">do</td>
<td id="CellaNome">lu</td>
<td id="CellaNome">ma</td>
<td id="CellaNome">me</td>
<td id="CellaNome">gi</td>
<td id="CellaNome">ve</td>
<td id="CellaNome">sa</td>
<td id="CellaNome">do</td>
<td id="CellaNome">lu</td>
<td id="CellaNome">ma</td>		
</tr>
<tr>
<td id="CellaMese">gen</td>		
<td id="CellaGiornoVuota"></td>		
<td id="CellaGiornoVuota"></td>	
<td id="CellaGiornoVuota"></td>	
<td id="CellaGiornoVuota"></td>		
<td id="CellaGiornoVuota"></td>		
<td id="CellaGiornoVuota"></td>		
<td id="CellaGiorno">1</td>		
<td id="CellaGiorno">2</td>		
<td id="CellaGiorno">3</td>		
<td id="CellaGiorno">4</td>		
<td id="CellaGiorno">5</td>		
<td id="CellaGiorno">6</td>		
<td id="CellaGiorno">7</td>		
<td id="CellaGiorno">8</td>		
<td id="CellaGiorno">9</td>	
<td id="CellaGiorno">10</td>		
<td id="CellaGiorno">11</td>	
<td id="CellaGiorno">12</td>		
<td id="CellaGiorno">13</td>	
<td id="CellaGiorno">14</td>		
<td id="CellaGiorno">15</td>		
<td id="CellaGiorno">16</td>		
<td id="CellaGiorno">17</td>		
<td id="CellaGiorno">18</td>		
<td id="CellaGiorno">19</td>		
<td id="CellaGiorno">20</td>		
<td id="CellaGiorno">21</td>		
<td id="CellaGiorno">22</td>		
<td id="CellaGiorno">23</td>		
<td id="CellaGiorno">24</td>		
<td id="CellaGiorno">25</td>		
<td id="CellaGiorno">26</td>		
<td id="CellaGiorno">27</td>		
<td id="CellaGiorno">28</td>		
<td id="CellaGiorno">29</td>		
<td id="CellaGiorno">30</td>		
<td id="CellaGiorno">31</td> 
</tr>
</table>

**br1** · 03-01-2012, 11:33

Non puoi usare lo stesso ID per piu' oggetti nella pagina, usa le classi per applicare lo stile.

suggerimenti:

codice:

.CellaGiornoSel {
	text-align:center;
	background: #FFCCCC;
	font-family:Arial, Helvetica, sans-serif;
	font-size:xx-small;
	border:1px solid #A0D0F8;
}

<td class="CellaGiorno">,<%=a%>,this);return false"><%=a%></td>

<form><input type="text" name="giorni" size=100></form>

<script>
function flag(m,a,o) {
	c = document.forms[0].giorni;
	v = c.value;
	ma = ";"+m+","+a;
	if(v.indexOf(ma)>=0) {
		// cancello
		v = v.replace(ma,"");
		o.parentNode.className='CellaGiorno';
	} else {
		// aggiungo
		v = v + ma;
		o.parentNode.className='CellaGiornoSel';
	}
	c.value = v;
}
</script>

EDIT: Ho aggiunto anche il cambio di classe dei selezionati per evidenziarli...

**peppeweb** · 03-01-2012, 12:06

intanto grazie ....

quando seleziono il giorno mi da questo risultato nell'imput= ;1,5 questo sarebbe la selezione del giorno 5 del mese di gennaio .. è corretta ? .... il ; non dovrebbe essere dopo ?

e poi l'idea di assegnare una classe a quelli selezionati mi sembra eccellente ma dopo averla dichiarata nel foglio di stile dove la inserisco ?

**peppeweb** · 03-01-2012, 12:07

scusa br1 !!!!

non mi ero accorto che la classe l'avevi già settata

**peppeweb** · 03-01-2012, 12:13

la classe non mi funziona, sei sicuro che la cella va settata cosi ? <td Class="CellaGiorno"> oppure al posto di "CellaGiorno" ci va la variabile className ?

**br1** · 03-01-2012, 12:14

il ; lo metti dove ti pare, basta che ne tenga conto lato server...

Piuttosto ho notato un difetto sulla cancellazione dei giorni, per ovviare adotta questo:

codice:

<script>
function flag(m,a,o) {
	c = document.forms[0].giorni;
	v = c.value;
	ma = m+","+a+";";
	if((";"+v).indexOf(";"+ma)>=0) {
		// cancello
		v = v.replace(ma,"");
		o.parentNode.className='CellaGiorno';
	} else {
		// aggiungo
		v = v + ma;
		o.parentNode.className='CellaGiornoSel';
	}
	c.value = v;
}
</script>

**peppeweb** · 03-01-2012, 12:21

non funziona piu e mi da questo errore:

Messaggio: 'parentNode' è nullo o non è un oggetto
Linea: 63
Carattere: 4
Codice: 0

>>>> o.parentNode.className='CellaGiornoSel';

**peppeweb** · 03-01-2012, 12:23

quello precedente funziona:

<script>
function flag(m,a) {
c = document.forms[0].giorni;
v = c.value;
ma = ";"+m+","+a;
if(v.indexOf(ma)>=0) {
// cancello
v = v.replace(ma,"");
} else {
// aggiungo
v = v + ma;
}
c.value = v;
}
</script>

Discussione: selezionare determinate celle

Strumenti discussione

Ricerca discussione

Visualizza

selezionare determinate celle

Permessi di invio