Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <title>How to highlight the selected row in table/gridview using jquery</title>
- <script type="text/javascript" src="jquery.js"></script>
- <script language="javascript" type="text/javascript">
- $(document).ready(function()
- {
- $("#checkall").live('click',function(event){
- $('input:checkbox:not(#checkall)').attr('checked',this.checked);
- //To Highlight
- if ($(this).attr("checked") == true)
- {
- //$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#FF3700");
- $("#tblDisplay").find('tr:not(#chkrow)').css("background-color","#FC9A01");
- }
- else
- {
- //$(this).parents('table:eq(0)').find('tr:not(#chkrow)').css("background-color","#fff");
- $("#tblDisplay").find('tr:not(#chkrow)').css("background-color","#FFF");
- }
- });
- $('input:checkbox:not(#checkall)').live('click',function(event)
- {
- if($("#checkall").attr('checked') == true && this.checked == false)
- {
- $("#checkall").attr('checked',false);
- $(this).closest('tr').css("background-color","#ffffff");
- }
- if(this.checked == true)
- {
- $(this).closest('tr').css("background-color","#FC9A01");
- CheckSelectAll();
- }
- if(this.checked == false)
- {
- $(this).closest('tr').css("background-color","#ffffff");
- }
- });
- function CheckSelectAll()
- {
- var flag = true;
- $('input:checkbox:not(#checkall)').each(function() {
- if(this.checked == false)
- flag = false;
- });
- $("#checkall").attr('checked',flag);
- }
- });
- </script>
- </head>
- <body>
- <table width="50%" cellspacing="0" border="0" align="left" id="tblDisplay" cellpading="0"
- style="font-family: verdana; font-size: 10px;">
- <thead>
- <tr id="chkrow">
- <th>
- <input type="checkbox" id="checkall" />
- </th>
- <th>
- Sr.
- </th>
- <th style="text-align: left;">
- First Name
- </th>
- <th style="text-align: left;">
- Last Name
- </th>
- <th>
- Country
- </th>
- <th>
- Marital Status
- </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td style="text-align: center;">
- <input type="checkbox" value="1" />
- </td>
- <td style="text-align: center;">
- 1
- </td>
- <td style="text-align: left;">
- Adeel
- </td>
- <td style="text-align: left;">
- Fakhar
- </td>
- <td style="text-align: center;">
- Pakistan
- </td>
- <td style="text-align: center;">
- Single
- </td>
- </tr>
- <tr>
- <td style="text-align: center;">
- <input type="checkbox" value="2" />
- </td>
- <td style="text-align: center;">
- 2
- </td>
- <td style="text-align: left;">
- Omer
- </td>
- <td style="text-align: left;">
- Fakhar
- </td>
- <td style="text-align: center;">
- Pakistan
- </td>
- <td style="text-align: center;">
- Single
- </td>
- </tr>
- <tr>
- <td style="text-align: center;">
- <input type="checkbox" value="3" />
- </td>
- <td style="text-align: center;">
- 3
- </td>
- <td style="text-align: left;">
- Umer
- </td>
- <td style="text-align: left;">
- Mukhtar
- </td>
- <td style="text-align: center;">
- Pakistan
- </td>
- <td style="text-align: center;">
- Single
- </td>
- </tr>
- <tr>
- <td style="text-align: center;">
- <input type="checkbox" value="4" />
- </td>
- <td style="text-align: center;">
- 4
- </td>
- <td style="text-align: left;">
- Mark
- </td>
- <td style="text-align: left;">
- Waugh
- </td>
- <td style="text-align: center;">
- Australia
- </td>
- <td style="text-align: center;">
- Married
- </td>
- </tr>
- </tbody>
- </table>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement