[JavaScript]Colorare solo alcune celle di una riga della tabella

matti157 · 18-04-2011, 15:45

Ciao, sto impazzendo per cercare di risolvere questo problema

in pratica io ho una tabella di 6 colonne e N righe (in quanto la genero da un piccolo database e le righe possono variare)
quando io faccio un click su una cella della prima colonna e terza riga vorrei che mi si colorasse anche la cella della terza colonna ma sempre della stessa riga

ho provato con un OnClick sul <tr> che mi richiama una funzione, dentro questa funzione provo con getElementByID("id1") e getElementByID("id1") ma mi si evidenziano solo le 2 celle che mi interessano della prima riga ovunque io clicchi.....

Kenger · 18-04-2011, 20:17

Puoi usare un framework come jQuery? Ti faciliterebbe tantissimo il lavoro

gokan · 18-04-2011, 21:11

Ciao, in linea di principio devi usare qualcosa di simile.

Codice:

<html>
<head>
<script type="text/javascript">
function colora(){

 document.getElementById('c31').style.backgroundColor = '#EAF2D3';
document.getElementById('c33').style.backgroundColor = '#EAF2D3';
}
</script>
</head>

<table border="1">
<tr>
<td>(1,1)</td><td>(1,2)</td><td>(1,3)</td><td>(1,4)</td><td>(1,5)</td><td>(1,6)</td>
</tr>
<tr>
<td>(2,1)</td><td>(2,2)</td><td>(2,3)</td><td>(2,4)</td><td>(2,5)</td><td>(2,6)</td>
</tr>
<tr>
<td id="c31" onclick="colora()">(3,1)</td><td>(3,2)</td><td id="c33">(3,3)</td><td>(3,4)</td><td>(3,5)</td><td>(3,6)</td>
</tr>

</table>

</body>
</html>

Mi immagino ad esempio, che la tua tabella, sebbene abbia un numero di colonne prefissato (6), abbia un numero di righe variabile.
In questo caso con il tuo linguaggio lato server (potrebbe essere java o direttamente dentro una jsp) potresti recuperare il numero della riga corrente e fare un pò di logica nel metodo javascript.
Ad esempio, il metodo colora lo dovresti mettere sull'onclick di tutte le TD:

Codice:

function colora(myTD,riga, colonna){

if(riga == 1 or riga == 3 or..){
}
document.getElementById(myTD).style.backgroundColor = '#EAF2D3';
document.getElementById(colonna).style.backgroundColor = '#EAF2D3';
}

ciao

Kenger · 18-04-2011, 21:30

Giusto per la cronaca, con jQuery il codice (senza bisogno di toccare l'HTML) diventerebbe:

Codice PHP:


			
<script type="text/javascript">
$("#idtabella").delegate("td", "click", function(){
    if( $(this).prevAll().length == 0)
              $(this).parent().children().index(2).css('background-color', #123);
});
</script>

EDIT: Ovviamente assumendo che tu lo debba fare per tutte le righe, anche se da quello che hai detto non son sicuro.

18-04-2011, 21:30	#4
Kenger Member Iscritto dal: Aug 2005 Messaggi: 168	Giusto per la cronaca, con jQuery il codice (senza bisogno di toccare l'HTML) diventerebbe: Codice PHP: `<script type="text/javascript"> $("#idtabella").delegate("td", "click", function(){ if( $(this).prevAll().length == 0) $(this).parent().children().index(2).css('background-color', #123); }); </script>` EDIT: Ovviamente assumendo che tu lo debba fare per tutte le righe, anche se da quello che hai detto non son sicuro.

18-04-2011, 15:45	#1
matti157 Bannato Iscritto dal: Jan 2008 Città: Ivrea (TO) Messaggi: 627	[JavaScript]Colorare solo alcune celle di una riga della tabella Ciao, sto impazzendo per cercare di risolvere questo problema in pratica io ho una tabella di 6 colonne e N righe (in quanto la genero da un piccolo database e le righe possono variare) quando io faccio un click su una cella della prima colonna e terza riga vorrei che mi si colorasse anche la cella della terza colonna ma sempre della stessa riga ho provato con un OnClick sul <tr> che mi richiama una funzione, dentro questa funzione provo con getElementByID("id1") e getElementByID("id1") ma mi si evidenziano solo le 2 celle che mi interessano della prima riga ovunque io clicchi.....

18-04-2011, 20:17	#2
Kenger Member Iscritto dal: Aug 2005 Messaggi: 168	Puoi usare un framework come jQuery? Ti faciliterebbe tantissimo il lavoro

Strumenti
Mostra una versione stampabile Invia questa pagina per email