- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- DIV esteso come tutta la colonna
-
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;)
-
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><script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(":checkbox").on("change", function() {
var that = this;
$(this).parent().css("background-color", function() {
return that.checked ? "#ff0000" : ""; });});});//]]>
</script></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.
-
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.<table width="100%" style="background-color:Yellow;"></table>
Se poi vuoi utilizzare Javascript posso fare una prova più tardi e farti sapere.
-
Ciao
La tabella deve essere di default bianca, SE clicco sulla checkbox solo allora mi deve cambiare colore. Ecco perché uso il javascript
-
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> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </div> <input id="Button1" type="button" value="button" onclick="ciao();" /> </form>
</body>
</html>
-
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
-
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...
-
Sììììììììììììììììììì funziona!!!!!
E' sempre onClick! Che per caso sai come al secondo clic/deselezionamento si disattiva il colore?
Grazie cmq sei stata gentilissima!!
-
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
-
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?
-
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]
-
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...
-
grazie comunque!