In this jquery tutorial you will learn how to highlight the selected row in table/gridview using jquery. I am selecting the rows on the basis of checked checkboxes.
I have already written a tutorial about how to check/uncheck all checkboxes using jquery.
So I will continue from there and merge the code to highlight the selected row with the code to check/uncheck all checkboxes using jquery.
The code that I format as bold will highlight the selected row.
I have already written a tutorial about how to check/uncheck all checkboxes using jquery.
So I will continue from there and merge the code to highlight the selected row with the code to check/uncheck all checkboxes using jquery.
The code that I format as bold will highlight the selected row.
Now let's have a look over welcome.html
<html>
<head>
<title> How to highlight the selected row in table/gridview using jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></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>
http://nice-tutorials.blogspot.com/2010/08/how-to-highlight-selected-row-in.html
No comments:
Post a Comment