riempire tabella al click su link [era: Javascript]

**Umby** · 18-10-2005, 15:11

Per ottenere una cosa tipo questa...che permette d'inserire i calciatori con un click cosa devo utilizzare Javascript???

Osservate questo esempio:

http://lfc.altervista.org/formazione.html

**Nazareno** · 18-10-2005, 17:14

Javascript

**Umby** · 19-10-2005, 08:23

qualcuno mi può postare un esempio di come ottenere quella funzione???...oppure qualke link dove ci sono esempi del genere???

**badaze** · 19-10-2005, 11:57

Una possibilità è questa

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.header           {color:white;background-color:navy;font-family:verdana;font-size:8pt;font-weight:bold}
.portiere-libero  {color:blue;font-family:verdana;font-size:8pt;font-weight:bold}
.centro-libero    {color:green;font-family:verdana;font-size:8pt;font-weight:bold}
.attacante-libero {color:red;font-family:verdana;font-size:8pt;font-weight:bold}

.portiere-scelto  {color:white;background-color:blue;font-family:verdana;font-size:8pt;font-weight:bold}
.centro-scelto    {color:white;background-color:green;font-family:verdana;font-size:8pt;font-weight:bold}
.attacante-scelto {color:white;background-color:red;font-family:verdana;font-size:8pt;font-weight:bold}

.over             {color:white;background-color:gray;font-family:verdana;font-size:8pt;font-weight:bold}
.numero           {font-family:verdana;font-size:8pt;}

.hidden           {display:none}
-->
</style>

<script language="JavaScript" type="text/javascript">
<!--
//-------------------- Cambio class al passaggio del mouse
savStyle = "";
function changeBg(aTR,mode) {
 if (aTR.className.indexOf('scelto') > -1) {
	return;
 } // if (aTR.className.indexOf('scelto') > -1)
 if (mode == 0) {
  savStyle      = aTR.className;
	aTR.className = "over";
	aTR.setAttribute("realClassName",savStyle);
	return;
 } //  if (mode == 0)
 aTR.className = savStyle;
} // function changeBg(aTR,mode)

//-------------------- Assegna un titolare
function assegna(aTR) {
 if (aTR.className.indexOf('scelto') > -1) {
  alert('Giocatore già scelto');
	return;
 } // if (aTR.className.indexOf('scelto') > -1)

 tabTitolari = document.getElementById('titolari');
 lenTab      = tabTitolari.rows.length;
 //--------- Ricerca del primo posto vuoto - tiene conto del TH
 for (i=1;i<lenTab;i++) {
  //--------- Riga corrente
	curRow = tabTitolari.rows.item(i);
	//--------- Se la 3° cella non ha nessun valore la scelgo
	terzaCella = curRow.cells.item(2);
	if (terzaCella.innerText == "" || terzaCella.innerText == null) {
	 realClass                      = aTR.getAttribute("realClassName");
	 child                          = aTR.cells.item(0).childNodes.item(0);
	 var newNode                    = document.createTextNode(child.data);;
	 curRow.cells.item(1).appendChild(newNode);
	 curRow.cells.item(1).vAlign    = "top";
	 curRow.cells.item(1).className = realClass;
	 curRow.cells.item(2).innerText = aTR.cells.item(0).id;
	 aTR.className                  = realClass.replace(/libero/gi,"scelto");
	 return;
	} // if (curRow.cells.item(2).innerText == "")
 } //  for (i=0;i<lenTab;i++) 
} // function assegna(aTR)

//-------------------- Legge i titolari
function leggi() {
 tabTitolari = document.getElementById('titolari');
 lenTab      = tabTitolari.rows.length;
 //--------- Ricerca del primo posto vuoto - tiene conto del TH
 for (i=1;i<lenTab;i++) {
  //--------- Riga corrente
	curRow = tabTitolari.rows.item(i);
	alert(curRow.cells.item(2).innerText);
 } // for (i=1;i<lenTab;i++)
} // function leggi() 
//-->
</script>


</head>
<body>


<table summary="" border="1" style="border:1px solid black ">
<th class="header">Persona</th>
<th class="header">Posto</th>
<th class="header">Squadra</th>


<tr class="portiere-libero" onmouseover="changeBg(this,0)" onmouseout="changeBg(this,1)" onclick="assegna(this)">
 <td id="po123">Pippo portiere</td><td>Portiere</td><td>Roma</td>
</tr>
<tr class="portiere-libero" onmouseover="changeBg(this,0)" onmouseout="changeBg(this,1)" onclick="assegna(this)">
 <td id="po124" >Pluto portiere</td><td>Portiere</td><td>Lazio</td>
</tr>
<tr class="portiere-libero" onmouseover="changeBg(this,0)" onmouseout="changeBg(this,1)" onclick="assegna(this)">
 <td id="po423">Caio portiere</td><td>Portiere</td><td>Udinese</td>
</tr>


<tr class="centro-libero" onmouseover="changeBg(this,0)" onmouseout="changeBg(this,1)" onclick="assegna(this)">
 <td id="cc679">Pippo CC</td><td>Centro campista</td><td>Genoa</td>
</tr>
<tr class="centro-libero" onmouseover="changeBg(this,0)" onmouseout="changeBg(this,1)" onclick="assegna(this)">
 <td id="cc689">Pluto CC</td><td>Centro campista</td><td>Atalanta</td>
</tr>
<tr class="centro-libero" onmouseover="changeBg(this,0)" onmouseout="changeBg(this,1)" onclick="assegna(this)">
 <td id="cc670">Ciao CC</td><td>Centro campista</td><td>Inter</td>
</tr>


<tr class="attacante-libero" onmouseover="changeBg(this,0)" onmouseout="changeBg(this,1)" onclick="assegna(this)">
 <td id="at889">Pippo Attacante</td><td>Attacante</td><td>Milan</td>
</tr>
<tr class="attacante-libero" onmouseover="changeBg(this,0)" onmouseout="changeBg(this,1)" onclick="assegna(this)">
 <td id="at677">Pluto Attacante</td><td>Attacante</td><td>Ascoli piceno</td>
</tr>
<tr class="attacante-libero" onmouseover="changeBg(this,0)" onmouseout="changeBg(this,1)" onclick="assegna(this)">
 <td id="at608">Ciao Attacante</td><td>Attacante</td><td>Juventus</td>
</tr>
</table>



<table id="titolari" summary="" border="1" style="border:1px solid black;width:350 ">
<th class="header" colspan="2">Titolari</th>
<tr id="pos1">
 <td style="width:20px"  class="numero" align="center">1</td>
 <td style="width:330px" class="numero"></td>
 <td class="hidden"></td>
</tr>
<tr id="pos2">
 <td style="width:20px"  class="numero" align="center">2</td>
 <td style="width:330px" class="numero"></td>
 <td class="hidden"></td>
</tr>
<tr id="pos3">
 <td style="width:20px"  class="numero" align="center">3</td>
 <td style="width:330px" class="numero"></td>
 <td class="hidden"></td>
</tr>
<tr id="pos4">
 <td style="width:20px"  class="numero" align="center">4</td>
 <td style="width:330px" class="numero"></td>
 <td class="hidden"></td>
</tr>
<tr id="pos5">
 <td style="width:20px"  class="numero" align="center">5</td>
 <td style="width:330px" class="numero"></td>
 <td class="hidden"></td>
</tr>
</table>
<hr>
<input type="button" value="Leggi i titolari" onclick="leggi()">
</body>
</html>

Attento alle righe tagliate

**Umby** · 19-10-2005, 12:06

si grazie Badaze...
unico problema è che quando clicco su "leggi i titolari"
mi compaiono le variabili e non i nomi dei calciatori...

**badaze** · 19-10-2005, 12:14

Originariamente inviato da Umby
si grazie Badaze...
unico problema è che quando clicco su "leggi i titolari"
mi compaiono le variabili e non i nomi dei calciatori...

E' fatto apposta. Se devi usare i dati (per metterli in una tabella ) devi lavorare non con i nomi dei giocatori ma con i loro id.

Nel mio esempio ho fatto in modo che per :
- un portiere l'id sia = a "po" seguito dall'identificativo del giocatore.
- un centro campista l'id sia = a "cc" seguito dall'identificativo del giocatore.
- un attacante l'id sia = a "at" seguito dall'identificativo del giocatore.

**Umby** · 19-10-2005, 13:21

però cosi è poco leggibile per gli utenti...
nn c'è una soluzione???
ed inoltre come fare in modo che questi dati (una volta scelta la squadra) vengano poi inviati ad un inridizzo di posta elettronica???

Grazie

Discussione: riempire tabella al click su link [era: Javascript]

Strumenti discussione

Ricerca discussione

Visualizza

Javascript

SI...

Permessi di invio