jQuery How to build a simple table style switcher

1. Get Started
   Let's create an html table that is showing some sample data. Here is it:
   

   
   <table>
              <tbody>
                  <tr>
                      <th>
                          Column1
                      </th>
                      <th>
                          Column2
                      </th>
                  </tr>
                  <tr>
                      <td>Data1.1</td>
                      <td>Data2.1</td>
                  </tr>
                  <tr>
                      <td>Data1.2</td>
                      <td>Data2.2</td>
                  </tr>
              </tbody>
          </table>
   

   
   
   


2. Let's Add some style to it
   Let's add some simple styling to the table so it looks pretty! here is the css:
   

   
   table{width:400px;border:solid 1px black;}
   th {background:black;color:White;}
   td {color:Black;}
   

   
   
   


3. Thinking about multiple styles of table
   Let's add an id to table and change some things in our css to make it more
   specific.
   HTML:
   

   
   <table id="my-table" class="my-table">
              <tbody>
                  <tr>
                      <th>
                          Column1
                      </th>
                      <th>
                          Column2
                      </th>
                  </tr>
                  <tr>
                      <td>Data1.1</td>
                      <td>Data2.1</td>
                  </tr>
                  <tr>
                      <td>Data1.2</td>
                      <td>Data2.2</td>
                  </tr>
              </tbody>
          </table>
         
   

   
   CSS:
   

   
   #my-table{width:400px;border:solid 1px black;}
      #my-table th {background:black;color:White;}
      #my-table td {color:Black;}
   

   
   


4. Let's build another style
   Let's add another style to table. So now css looks like following:
   

   
      #my-table{width:400px;border:solid 1px black;}
      #my-table th {background:black;color:White;}
      #my-table td {color:Black;}
     
      #my-table-gray{width:400px;border:solid 1px gray;}
      #my-table-gray th {background:gray;color:White;}
      #my-table-gray td {color:gray;}
   

   
   
   


5. Let's add jQuery to switch style!
   

   
   <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
      <script>
          jQuery(document).ready(
              function() {
                  jQuery("a").click(function() {
                     
                      var table = jQuery("#my-table")[0];
                      if (table.className == "my-table")
                          table.className = "my-table-gray";
                      else
                          table.className = "my-table";
                  });
              }
              );
             
      </script>
   

   
   http://picasaweb.google.com/lh/photo/4KmKLPYDYIwzFS6BbNOfmg?authkey=Gv1sRgCJ2FjqX7hqreRw&feat=directlink
   

CheckBoxList Required Validation in Javascript

ASP.NET CODE:

<asp:CheckBoxList ID="chkList" runat="server">
            <asp:ListItem>Item One</asp:ListItem>
            <asp:ListItem>Item two</asp:ListItem>
            <asp:ListItem>Item three</asp:ListItem>
            <asp:ListItem>Item four</asp:ListItem>
        </asp:CheckBoxList>
        <asp:Button ID="btnSubmit" runat="server" ValidationGroup="CHK" OnClientClick="return validateChk();" Text="Validate"/>

JAVASCRIPT CODE:

function validateChk() {
            debugger;
            var found = false;
            var validated = false;
            var id = document.getElementById("<%=chkList.ClientID %>").id;
            var elements = document.forms[0].elements;
            for (i = 0; i < elements.length; i++) {
                if (elements[i].type == "checkbox" && elements[i].id.indexOf(id) > -1) {
                    found = true;
                    if (elements[i].checked) {
                        validated = true;
                        break;
                    }
                }
            }
            if (found && validated)
                return true;
            else
                return false;
            
        }

Using single ClientValidationFunction for similar validations using custom validator

Here is an example of how to write a common client validation function while using similar kind of validations on more than one asp.net control.
This example is showing how to validate two drop down list using a single javascript function for required
ASP.NET Markup

<asp:DropDownList ID="ddlCountry" runat="server" AutoPostBack="True" 
                onselectedindexchanged="ddlCountry_SelectedIndexChanged" CausesValidation="false">
            </asp:DropDownList>
            <asp:CustomValidator ID="cvCountry" runat="server" ControlToValidate="ddlCountry"
                EnableClientScript="true" ValidationGroup="REG" Display="None" ErrorMessage="Country is required" Text=" "
                ClientValidationFunction="validateCbo"></asp:CustomValidator>
<asp:DropDownList ID="ddlState" runat="server">
            </asp:DropDownList>
            <asp:CustomValidator ID="cvState" runat="server" ControlToValidate="ddlState"
                EnableClientScript="true" ValidationGroup="REG" Display="None" ErrorMessage="State is required" Text=" "
                ClientValidationFunction="validateCbo"></asp:CustomValidator>

Javascript client validation function:

function validateCbo(source, args) {
        var ddl = null;
        if(source.controltovalidate.indexOf('Country')>-1)
            ddl = document.getElementById('<%=ddlCountry.ClientID %>');
        else
            ddl = document.getElementById('<%=ddlState.ClientID %>');
        if (ddl != null) {
            args.IsValid = !(ddl.options[ddl.selectedIndex].value == 0);            
        }
        else
            args.IsValid = true;
    }   

DotNetNuke 5.x with .net framework 2.0 (web.config)

Everybody, who tried to deploy DotNetNuke 5.x on web servers that is not having .net framework 3.5 requires changes to web.config. You can download this web.config which worked for me.

Hope this helps :)