DIV esteso come tutta la colonna

nofcfro

DIV esteso come tutta la colonna

Salve,
sicuramente sarà una banalità: ho una tabella con due colonne, nella seconda c'è un lungo testo, nella prima volevo mettere un div con sfondo colorato che occupasse tutta la superficie della colonna. Come posso fare? Grazie anticipatamente

jayax

Se è solo uno sfondo colorato basta mettere background-color come attributo del "td" interessato.
Puoi decidere se usare uno dei colori proposti (es: background-color:Yellow;) oppure usare un esadecimale (es: background-color:#337a9b;)

nofcfro

Il codice è questo:
[HTML]<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Prova</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<style type='text/css'></style>

</head><body><div> <table width="100%"> <tr> <td><input type='checkbox' name='dd' value='1'> 1</td> <td>dfsdfdsfdsfdsfds</td> </tr> </table></div></body> </html>[/HTML]
Siccome Javascript lo conosco pochissimo, puoi cortesemente dirmi dove va messo l'attributo *td *? Grazia
PS. il colore deve prendere l'intera tabella.

jayax

Io non so dirti se ti convenga utilizzare Javascript per assegnare il colore allo sfondo.

La tabella è strutturata con <table> <tr><td>...</td></tr> ecc...
Se vuoi che l'intera tabella abbia come sfondo un colore allora devi inserire l'attributo su table.
es.

Se poi vuoi utilizzare Javascript posso fare una prova più tardi e farti sapere.

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!