Wednesday, August 1, 2012

JQuery Table Row Selected

We can highlight the selected row in a Table using jQuery script as follows.


$("#tblEmployee tr").click(function(event) {

   $(this).addClass("GridRowSelected");     

});





Example
Change the mapping of the jQuery file jquery-1.7.2.js and style sheet file Stylesheet.css to map to your local drive.

<html xmlns="http://www.w3.org/1999/xhtml" >
<
head><title>
      jQuery Table
</title>
<
script type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<
link type="text/css"
href="Stylesheet.css"
rel="Stylesheet" />
<script type="text/javascript">
$(document).ready(function() {
// Add Table Style
$("#tblEmployee").addClass("Table");
//
// Add Table Cell Style
$("#tblEmployee td").addClass("TableCell");
//
// Add Header Style
$("#tblEmployee th").addClass("TableHeader");
//
      // Add Row Style
      $("#tblEmployee tr").addClass("TableRow");        
      //
      $("#tblEmployee tr").click(function(event) {
      // Check if Row is already Selected
      if($(this).hasClass('TableRowSelected'))
      {
         // If selected, Remove the Selected class
         $(this).removeClass("TableRowSelected");
      }
      else
      {
          // If not selected, Add the Selected class
          $(this).addClass("TableRowSelected");                   
      }
 </script>    
</head>
<body>
<table
        cellspacing="0"
        rules="all"
        border="1"
        id="tblEmployee"
        style="border-collapse:collapse;">
      <tr>
            <th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">DOB</th>
<th scope="col">Email</th>
      </tr>
<tr>                         
             <td>237</td>
             <
td>John</td>
             <
td>05/04/1981</td>
             <
td>john@abcsoftware.com</td>
</tr>
<
tr>       
       <td>238</td>
       <
td>Tom</td>
       <
td>11/11/1967</td>
       <
td>tom@abcsoftware.com</td>
      </tr>
<tr>         
             <td>239</td>
       <td>Harry</td>
             <
td>10/07/1973</td>
             <
td>harry@abcsoftware.com</td>
      </tr>
<tr>             
             <td>240</td>
             <
td>Peter</td>
             <
td>01/01/1981</td>
             <
td>peter@abcsoftware.com</td>
</tr>
<
tr>
<td>241</td>
<
td>John</td>
<
td>05/04/1981</td>
<
td>john@abcsoftware.com</td>
      </tr>
</table>
 
</body>
</html>

Add your Table (or) add server side code to populate the Table with data.

Stylesheet.css

.Table
{
      border: 1px solid #000000;
}
.TableCell
{
    padding: 3px 3px 3px 3px; /* Cellpadding */
    border: 1px solid #000000;
    font-family:Verdana;
    font-size:10pt;   
}
.TableCellEven
{
    padding: 3px 3px 3px 3px;
    border: 1px solid #000000;
    background-color:#ffffcc;
    font-family:Verdana;
    font-size:10pt;    
}
.TableCellOdd
{
    padding: 3px 3px 3px 3px;
    border: 1px solid #000000;
    background-color:#fedcba;
    font-family:Verdana;
    font-size:10pt; 
}
.TableHeader
{
      background-color:#999966;
}
.TableRow
{
    background-color:#ffffcc;
}
.TableRowEven
{
    background-color:#ffffcc;
}
.TableRowOdd
{
    background-color:#FEDCBA;
}
.TableRowHover
{
    background-color:#CCCCCC;
}
.TableRowSelected
{
    background-color:#CC99FF;

Search Flipkart Products:
Flipkart.com

No comments: