2012-04-28 4 views
0

그래서 ASP.NET에서이 gridview 있어요, 그것은 Gmail 클라이언트에 대한, 내가 선택한 동시에 여러 메시지에 대한 확인란이있는 템플릿 필드를 만들었지 만 먼저 메시지를 선택할 때 행 배경색을 변경하고 싶습니다. 이미 CSS가 있지만 작업을 트리거하는 방법이나 코드에서 어떤 행을 선택했는지 알 수 없습니다. 여기확인란을 선택하면 특정 행 스타일을 어떻게 변경합니까? C# ASP.NET

<asp:GridView ID="inboxGrid" runat="server" 
     AutoGenerateColumns="false" CssClass="inbox" ShowHeader="false" BorderStyle="None" GridLines="None"> 
     <Columns> 
      <asp:TemplateField> 
       <ItemTemplate> 
       <asp:CheckBox ID="chkSelect" runat="server" /> 
       </ItemTemplate> 
       <ItemStyle Width="24" CssClass="check"/> 
      </asp:TemplateField> 
      <asp:TemplateField> 
       <ItemStyle CssClass="from" /> 
       <ItemTemplate> 
       <asp:Label ID="lblFrom" runat="server" 
        Text = '<%# Eval("From") %>' /> 
       </ItemTemplate> 
      </asp:TemplateField> 
      <asp:TemplateField> 
       <ItemStyle CssClass="subject" /> 
       <ItemTemplate> 
       <asp:Label ID="lblSubject" runat="server" Text='<%# Eval("Subject") %>' /> 
       </ItemTemplate> 
      </asp:TemplateField> 
      <asp:TemplateField> 
       <ItemStyle CssClass="date" /> 
       <ItemTemplate> 
       <asp:Label ID="lblFecha" runat="server" Text='<%# Eval("Fecha") %>' /> 
       </ItemTemplate> 
      </asp:TemplateField> 
     </Columns> 
     <RowStyle CssClass="inbox"/> 
    </asp:GridView> 
+0

jQuery를 사용 하시겠습니까? – c0deNinja

+0

그래, 그 문제가 없다. –

답변

2

JQuery와

를 사용하여 솔루션은 CHK ASP 에라는 CssClass 추가 제공 : 확인란 여기

<asp:CheckBox ID="chkSelect" runat="server" CssClass="chk" /> 

을 여기 내 그리드의 템플릿입니다 스크립트는

$(document).ready(function() { 
     $(".chk :checkbox").live("click", function() { 
      $(this).closest("tr").css("background-color", this.checked ? "#0000FF" : ""); 
     }); 
    }); 
+0

이것은 훌륭했다. 단지 나중의 작업을 위해 행 인덱스를 저장해야한다. –

0

이 시도 :

<asp:CheckBox ID="chkSelect" runat="server" OnClick="changeCss(this.id);" /> 

당신은 체크 박스에 클래스를 전환 할 수 toggleClass('CssClassName')을 사용할 수 있습니다 딸깍 소리 :

function changeCss(ctrlId){ 
    $(ctrlId).parent().parent().toggleClass('check'); 
} 

가 계층 구조, 우리는 TR의 CSS를 변경하는 역 TR> TD> 체크 박스, 이동 /열.

관련 문제