0

私はASP.NETを使用しています。チェックボックス要素を持つグリッドビューがあります。チェックボックスがチェックされているかどうかを確認したい背景色を黒に変更できる最も近いtdにクラスを追加します

私はこれを使用しますが、動作しません:

Js ((テイスティングの目的)) :

    $(document).ready(function () {

    $(":CheckBox").closest('td').addClass("OnSelectTr");
});

CSS :

.OnSelectTr
{
    background-color:Black;
}

ASP.NET コード:

<asp:GridView ID="DossierGV" runat="server" AllowPaging="True" 
                            AllowSorting="True" DataSourceID="DossierPF" AutoGenerateColumns="False" 
                            DataKeyNames="ID_Dossier">
                          <Columns>
                              <asp:TemplateField HeaderText="Choisir">
                                  <EditItemTemplate>
                                      <asp:CheckBox ID="CheckBox1" runat="server" />
                                  </EditItemTemplate>
                                  <ItemTemplate>
                                      <asp:CheckBox ID="CheckBox1" runat="server" />
                                  </ItemTemplate>
                              </asp:TemplateField>
                              <asp:BoundField DataField="ID_Dossier" HeaderText="ID_Dossier" ReadOnly="True" 
                                  SortExpression="ID_Dossier" />
                              <asp:BoundField DataField="ID_Entreprise" HeaderText="ID_Entreprise" 
                                  SortExpression="ID_Entreprise" />
                              <asp:BoundField DataField="Date_Depot" HeaderText="Date_Depot" 
                                  SortExpression="Date_Depot" />
                              <asp:BoundField DataField="Type_Etude" HeaderText="Type_Etude" 
                                  SortExpression="Type_Etude" />
                              <asp:BoundField DataField="Dernier_Type" HeaderText="Dernier_Type" 
                                  SortExpression="Dernier_Type" />
                              <asp:BoundField DataField="Eligibile" HeaderText="Eligibile" 
                                  SortExpression="Eligibile" />
                              <asp:BoundField DataField="Fiche_Information" HeaderText="Fiche_Information" 
                                  SortExpression="Fiche_Information" />
                              <asp:BoundField DataField="Buletin_Adhesion" HeaderText="Buletin_Adhesion" 
                                  SortExpression="Buletin_Adhesion" />
                              <asp:BoundField DataField="Fiche_Renseignment" HeaderText="Fiche_Renseignment" 
                                  SortExpression="Fiche_Renseignment" />
                              <asp:BoundField DataField="Attestation" HeaderText="Attestation" 
                                  SortExpression="Attestation" />
                              <asp:BoundField DataField="ID_Cabinet" HeaderText="ID_Cabinet" 
                                  SortExpression="ID_Cabinet" />
                              <asp:BoundField DataField="Montant_Demander" HeaderText="Montant_Demander" 
                                  SortExpression="Montant_Demander" />
                              <asp:BoundField DataField="Duree" HeaderText="Duree" SortExpression="Duree" />
                              <asp:BoundField DataField="Porcentage_Taux" HeaderText="Porcentage_Taux" 
                                  SortExpression="Porcentage_Taux" />
                              <asp:BoundField DataField="Nom_Giac" HeaderText="Nom_Giac" 
                                  SortExpression="Nom_Giac" />
                          </Columns>
                      </asp:GridView>

ナビゲーターのコードソース:

<div class="GridViewDiv">

              <div id="Corps_DossierUpdatePanel">
                      <div>

        <table cellspacing="0" rules="all" border="1" id="Corps_DossierGV" style="border-collapse:collapse;">

            <tr>
                <th scope="col">Choisir</th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$ID_Dossier&#39;)">ID_Dossier</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$ID_Entreprise&#39;)">ID_Entreprise</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Date_Depot&#39;)">Date_Depot</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Type_Etude&#39;)">Type_Etude</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Dernier_Type&#39;)">Dernier_Type</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Eligibile&#39;)">Eligibile</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Fiche_Information&#39;)">Fiche_Information</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Buletin_Adhesion&#39;)">Buletin_Adhesion</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Fiche_Renseignment&#39;)">Fiche_Renseignment</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Attestation&#39;)">Attestation</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$ID_Cabinet&#39;)">ID_Cabinet</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Montant_Demander&#39;)">Montant_Demander</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Duree&#39;)">Duree</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Porcentage_Taux&#39;)">Porcentage_Taux</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Nom_Giac&#39;)">Nom_Giac</a></th>

            </tr><tr>

                <td>

                                      <input id="Corps_DossierGV_CheckBox1_0" type="checkbox" name="_ctl0:Corps:DossierGV:_ctl2:CheckBox1" />

                                  </td><td>3</td><td>4</td><td>10/12/2011 00:00:00</td><td>DS</td><td>IN</td><td>oui</td><td>oui</td><td>oui</td><td>oui</td><td>oui</td><td>1</td><td>1000,00</td><td>10</td><td>70</td><td>GIAC1-IMME</td>

            </tr>

        </table>

    </div>



</div>
4

2 に答える 2

2

クラスを行全体に追加するように指定したので、これを試すことができます。

$(document).ready(function(){
    $(':checkbox').on('change', function(){
        if ($(this).attr('checked'))
            $(this).parents('tr').addClass('OnSelectTr');
        else
            $(this).parents('tr').removeClass('OnSelectTr');
    });
});​

JSFiddle

チェックボックスの値が変更されるたびに関数が呼び出されるようにバインドし、チェックされた値に従って親の tr のクラスを追加または削除します。

.onは JQuery 1.7+ でのみサポートされていることに注意してください。古いバージョンでは に置き換え.onられ.liveます。

于 2012-05-22T19:55:25.240 に答える
0

どこでその JS を呼び出しているのかわかりませんが、セレクターが正しくないと感じています。チェックボックスの onchange イベントとして追加し、セレクターを次のように変更します。

$(this).closest('td').addClass("OnSelectTr");

チェックの解除も同様に処理されるため、 addClass を toggleClass に変更することもできます。

編集OK初期化のためにこれを試してください：

$(document).ready(function () {
     $("checkbox").change(function () { $(this).closest('td').addClass("OnSelectTr"); });
});
于 2012-05-22T19:41:22.660 に答える