使用jquery更改嵌套的gridview行的行顏色

Question

我想設置我勾選的複選框時的嵌套的gridview行的顏色和未使用jquery選擇時的另一種顏色。

這是我的html：

<div id="Div1" align="left" style="float: left; width: 80%; height: 701px;"> 

     <cc1:CoolGridView ID="ParentGridView" runat="server" AllowSorting="True" OnSorting="GridView1_Sorting" 
     AutoGenerateColumns="False" OnRowDataBound="gv_RowDataBound" 
     BackColor="White" BorderColor="White" BorderStyle="Ridge" BorderWidth="2px" 
     Height="550px" Width="525px" 
      HorizontalAlign="Left" DefaultColumnWidth="140px"> 
     <HeaderStyle BackColor="#4A3C8C" ForeColor="#E7E7FF"></HeaderStyle> 

     <Columns> 
      <asp:TemplateField HeaderText="District" SortExpression="district" HeaderStyle-Width="200px"> 
       <ItemTemplate> 
       <a href="javascript:DivExpandCollapse('div<%# Eval("district")%>');"> 
       <img id="imgdiv<%# Eval("district")%>" width="10px" border="0" src="Images/plus.png" /> </a> 
       <asp:CheckBox ID="District" Text='<%#Bind("district")%>' runat="server" /> 
       </ItemTemplate> 
       <HeaderStyle Width="200px"></HeaderStyle> 
       <ItemStyle HorizontalAlign="Center" Width="200px"></ItemStyle> 
      </asp:TemplateField> 

      <asp:TemplateField HeaderText="Server" HeaderStyle-Width="280px"> 
      <ItemTemplate> 
      <asp:DropDownList DataTextField="Server" DataValueField="Server" ID="DropDownList2" Runat="server" > 
       <asp:ListItem>A1</asp:ListItem> 
       <asp:ListItem>A2</asp:ListItem> 
       <asp:ListItem>Both</asp:ListItem> 
      </asp:DropDownList> 

      <tr><td colspan="100%"> 
      <div id="div<%# Eval("district") %>" style="display:none; position: relative; left: 15px; overflow: auto"> 
       <asp:GridView ID="StationGridView" runat="server" AutoGenerateColumns="False" OnSorting="GridView1_Sorting" 
       BorderStyle="Ridge" BorderWidth="2px" HorizontalAlign="Center" 
       GridLines="Both" ShowHeader="True" ShowFooter="False" > 
       <HeaderStyle BackColor="#4A3C8C" ForeColor="#E7E7FF"></HeaderStyle> 
        <Columns> 
         <asp:TemplateField HeaderText="Station" SortExpression="number"> 
         <ItemTemplate> 
          <asp:CheckBox ID="Station" Text='<%#Bind("number")%>' runat="server"/> 
         </ItemTemplate> 
          <ItemStyle HorizontalAlign="Center" Width="130px"></ItemStyle> 
         </asp:TemplateField> 

         <asp:TemplateField HeaderText="Server" > 
         <ItemTemplate> 
          <asp:DropDownList DataTextField="Server" DataValueField="Server" ID="DropDownList2" Runat="server" > 
           <asp:ListItem>A1</asp:ListItem> 
           <asp:ListItem>A2</asp:ListItem> 
           <asp:ListItem>Both</asp:ListItem> 
          </asp:DropDownList> 
         </ItemTemplate> 
          <ItemStyle HorizontalAlign="Center" Width="130px"></ItemStyle> 
         </asp:TemplateField> 

         <asp:BoundField DataField="TimeZone" HeaderText="Time Zone" SortExpression="timeZone"> 
          <ItemStyle HorizontalAlign="Center" Width="130px" /> 
         </asp:BoundField> 

         <asp:BoundField DataField="ServerType" HeaderText="Server Type" SortExpression="serverType"> 
          <ItemStyle HorizontalAlign="Center" Width="135px" /> 
         </asp:BoundField>    
        </Columns> 
        <RowStyle BackColor="#DEDFDE" ForeColor="Black" /> 
       </asp:GridView>     
      </div> 
      </td></tr> 
      </ItemTemplate> 
      <HeaderStyle Width="305px"></HeaderStyle> 
      <ItemStyle HorizontalAlign="Center" Width="280px"/> 
      </asp:TemplateField>          
     </Columns> 
    <BoundaryStyle BorderColor="Gray" BorderWidth="1px" BorderStyle="Solid"></BoundaryStyle> 
    <RowStyle BackColor="#DEDFDE" ForeColor="Black" /> 
     </cc1:CoolGridView> 
    </div> 

    <div style="float: right; width: 28%; height: 403px; margin-left: 0px;" id="RightColumn" align="center"> 
     <p style="height: 20px; width: 276px; margin-left: 5px;"> </p> 

     <asp:Button ID="BtnCreateXMLFile" runat="server" Height="51px" 
      style="margin-bottom: 0px; text-align: center; margin-left: 10px;" 
      Text="Create XML File" Width="185px" onclick="BtnCreateXMLFile_Click"/> 

     <p style="height: 20px; width: 277px; margin-left: 5px;"> </p> 

     <asp:Button ID="BtnClearSelections" runat="server" Height="35px" 
      style="margin-bottom: 0px; text-align: center; margin-left: 10px" 
      Text="Clear Selections" Width="150px" 
      onclick="BtnClearSelections_Click"/> 
    </div> 

目前，我的功能將改變嵌套細胞（站）與複選框的顏色，但不是整個行。

這是函數：

$("[id*=Station]").live("click", function() 
{ 
    var chkHeader = $(this); 

    if (chkHeader.is(":checked")) 
    {    
     $(chkHeader, "div").parent().attr('style','background-color:lime');   
    } 
    else 
    { 
     $(chkHeader, "div").parent().attr('style','background-color:#DEDFDE');   
    } 
}); 

任何幫助，將不勝感激。

凱萊

Answer 1

嘗試了這一點

+ ASP：

<asp:GridView ID="myGrid" runat="server" AutoGenerateColumns="False"> 
<Columns> 
    <asp:TemplateField> 
    <HeaderTemplate> 
     <asp:CheckBox ID="checkAll" runat="server" onclick="checkAll(this);" /> 
    </HeaderTemplate> 
    <ItemTemplate> 
     <asp:CheckBox ID="checkOne" runat="server" onclick="Check_Click(this)" Checked='<%# Bind("allowed") %>'/> 
    </ItemTemplate> 
    </asp:TemplateField> 
</Columns> 
</asp:GridView> 

+ JavaScript函數：

function Check_Click(objRef) { 
    //Get the Row based on checkbox 
    var row = objRef.parentNode.parentNode; 
    if (objRef.checked) { 
     //If checked change color 
     row.style.backgroundColor = "#E0E0E0"; 
    } 
    else { 
     //Change backcolor to original color 
     row.style.backgroundColor = "#FFFFFF"; 
    } 

    //Get the reference of GridView 
    var GridView = row.parentNode; 

    //Get all input elements in Gridview 
    var inputList = GridView.getElementsByTagName("input"); 

    for (var i = 0; i < inputList.length; i++) { 
     //The First element is the Header Checkbox 
     var headerCheckBox = inputList[0]; 

     //Based on all or none checkboxes 
     //are checked check/uncheck Header Checkbox 
     var checked = true; 
     if (inputList[i].type == "checkbox" && inputList[i] != headerCheckBox) { 
      if (!inputList[i].checked) { 
       checked = false; 
       break; 
      } 
     } 
    } 
    headerCheckBox.checked = checked; 
} 


function checkAll(objRef) { 
    var GridView = objRef.parentNode.parentNode.parentNode; 
    var inputList = GridView.getElementsByTagName("input"); 
    for (var i = 0; i < inputList.length; i++) { 
     //Get the Cell To find out ColumnIndex 
     var row = inputList[i].parentNode.parentNode; 
     if (inputList[i].type == "checkbox" && objRef != inputList[i]) { 
      if (objRef.checked) { 
       //If the header checkbox is checked 
       //check all checkboxes 
       //and highlight all rows 
       row.style.backgroundColor = "#E0E0E0"; 
       inputList[i].checked = true; 
      } 
      else { 
       //If the header checkbox is checked 
       //uncheck all checkboxes 
       //and change rowcolor back to original 
       row.style.backgroundColor = "#FFFFFF"; 
       inputList[i].checked = false; 
      } 
     } 
    } 
} 

不要太靠近你的要求，但它可以做的工作