• User Attivo

    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.


  • User

    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.


  • User Attivo

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


  • User

    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>


  • User Attivo

    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 :arrabbiato:
    Tranne questo l'esempio che mi hai fornito è perfetto 🙂


  • User

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


  • User Attivo

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


  • User

    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


  • User Attivo

    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?


  • User Attivo

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


  • User

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


  • User Attivo

    grazie comunque! 🙂