PDA

View Full Version : [JavaScript]Colorare solo alcune celle di una riga della tabella

matti157
18-04-2011, 14:45
Ciao, sto impazzendo per cercare di risolvere questo problema :fagiano:

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, 19:17
Puoi usare un framework come jQuery? Ti faciliterebbe tantissimo il lavoro
gokan
18-04-2011, 20:11
Ciao, in linea di principio devi usare qualcosa di simile.

<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:

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, 20:30
Giusto per la cronaca, con jQuery il codice (senza bisogno di toccare l'HTML) diventerebbe:


<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.