DIV esteso come tutta la colonna

nofcfro

Ciao
La tabella deve essere di default bianca, SE clicco sulla checkbox solo allora mi deve cambiare colore. Ecco perché uso il javascript

jayax

Io sono riuscita a fare così... vedi se ti va bene, ho usato un pulsante per scatenare l'evento ma il concetto è lo stesso.

<head runat="server">
<title></title>
<style type="text/css">
.style1
{
width: 100%;
}
</style>
<script language="javascript" type="text/javascript">
var td = document.getElementsByTagName('td');

var changeStyle = function (element) {
    element.style.backgroundColor = '#339a7b';

}
function ciao() 
{
    changeStyle(tabella);
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div>

    <table id="tabella" class="style1">
        <tr>
            <td>
               
            </td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
    </table>

</div>
<input id="Button1" type="button" value="button" onclick="ciao();" />
</form>

</body>
</html>

nofcfro

Si potrebbe fare a meno di usare un modulo form?
Perché le mie caselle checkbox fanno parte di un enorme modulo e non posso inserire un modulo dentro un altro modulo
Tranne questo l'esempio che mi hai fornito è perfetto

jayax

Si ovviamente il form puoi non metterlo. Devi sfruttare solo la parte javascript che ti ho scritto e la funzione legata all'evento "onclick" che per te sarà "onChecked" ... mi pare...

nofcfro

Sììììììììììììììììììì funziona!!!!!
E' sempre onClick! Che per caso sai come al secondo clic/deselezionamento si disattiva il colore?
Grazie cmq sei stata gentilissima!!

jayax

Puoi creare un'altra funzione legata al checked = false

var restoreStyle = function (element)
{ element.style.backgroundColor = '#ffffff'; }

function ciao2() {
restoreStyle(tabella); }

Puoi legare la funzione all'evento onUncheked
msdn.microsoft.com/en-us/library/system.windows.controls.primitives.togglebutton.onunchecked.aspx

nofcfro

Ciao
il link che mi hai postato è rotto
Io ho fatto così ma non funziona:

[HTML]<head runat="server"><style type="text/css">.style1{width: 100%;}</style><script language="javascript" type="text/javascript">var td = document.getElementsByTagName('td');
var changeStyle = function (element) {element.style.backgroundColor = '#339a7b';
}function ciao() {changeStyle(tabella);}
var restoreStyle = function (element) { element.style.backgroundColor = '#ffffff'; }
function ciao2() { restoreStyle(tabella); }
</script>
</head><body><form id="form1" runat="server"><div>
<table id="tabella" class="style1"><tr><td><input type="checkbox" name="checkbox" id="checkbox" onClick="ciao();" onUncheked="ciao2();" >
</td><td> </td></tr><tr><td> </td><td> </td></tr></table>
</div><br/><br/><div>
<table id="tabella" class="style1"><tr><td><input type="checkbox" name="checkbox" id="checkbox" onClick="ciao();" onUncheked="ciao2();" >
</td><td> </td></tr><tr><td> </td><td> </td></tr></table>
</div><br/><br/><div>
<table id="tabella" class="style1"><tr><td><input type="checkbox" name="checkbox" id="checkbox" onClick="ciao();" onUncheked="ciao2();" >
</td><td> </td></tr><tr><td> </td><td> </td></tr></table>
</div>
</body></html>[/HTML]

PS. ho creato 3 campi <div> facendo copia incolla, se clicco la prima checkbox si colora tutta la tabella, se invece clicco la seconda o la terza checkbox, non succede nulla, come mai?

nofcfro

Ciao
L'impianto sembra essere corretto, ma qualunque checkbox seleziono si colora solamente la prima tabella, poi se deseleziono la checkbox non torna come prima
Posto il codice, grazie anticipatamente!!

[HTML]<head runat="server">
<style type="text/css">.style1{width: 100%;}</style>
<script language="javascript" type="text/javascript">
var td = document.getElementsByTagName('td');
var changeStyle = function (element)
{element.style.backgroundColor = '#339a7b';}
function ciao()
{changeStyle(tabella);}

var restoreStyle = function (element)
{ element.style.backgroundColor = '#ffffff'; }
function ciao2()
{ restoreStyle(tabella); }
</script>
</head><body>Primo Campo:<div><table id="tabella" class="style1"><tr><td width="28%"><input type="checkbox" name="checkbox" id="checkbox" onClick="ciao()" onblur="ciao2();" ></td><td width="72%">aa</td></tr><tr><td> </td><td>aa</td></tr></table></div><br/><br/>
Secondo Campo:<div><table id="tabella2" class="style1"><tr><td width="28%"><input type="checkbox" name="checkbox" id="checkbox" onClick="ciao();" onblur="ciao2();" ></td><td width="72%">bb</td></tr><tr><td> </td><td>bb</td></tr></table></div><br/><br/>
Terzo Campo:<div><table id="tabella3" class="style1"><tr><td width="28%"><input type="checkbox" name="checkbox" id="checkbox" onClick="ciao();" onblur="ciao2();" ></td><td width="72%">cc</td></tr><tr><td> </td><td>cc</td></tr></table></div>
</body></html>[/HTML]

jayax

Non saprei, forse è necessario un ciclo for each da aggiungere.
Per quanto riguarda il link è semplicemente la classe checkbox su msdn, la trovi su google.
Non ho testato la parte che ti ho postato da legare a unchecked, bisognerebbe fare delle prove utilizzando delle funzioni diverse e fare debug...

nofcfro

grazie comunque!