The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells. –W3Org
In design purpose we can easily design the templates using the tables instead of divs. But if you design the template please use the divs instead of table (Suggested by our designer).Ok now we go for our topic to highlight the table rows.
Why we need to highlight the table row?
Most of the times we need to display the data like a grid. At that time choose the table to display the data. For example if you want to display the data from the database like books in category A. We need to get all the data row by row and include the rows in a table and we place the data in the appropriate columns.
If user wants to delete the third row we need to make the checkbox or radio button to choose the row and if user click the delete button we will delete the row. At this situation we need to highlight which row user chosen for delete, by this way we can avoid accidentally delete the wrong one.
VIEW DEMO
Coding Part:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Technotiger87-Highlight Selected row in a table using Jquery and CSS</title>
<script type="text/javascript" src="js/Jquery.1.4.4.js"></script>
<style>
.tableborder
{
padding: 2px 4px 2px 4px;
border: 1px solid #FFFFFF;
}
.tabletitle
{
background:none repeat scroll 0 0 #9EC630;
border-color:#FFFFFF;
border-style:solid;
border-width:1px 1px 1px 0;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
height:20px;
padding-left:5px;
text-align:center;
vertical-align:bottom;
width:150px;
}
.tableodd
{
font-size: 12px;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
border-style:none solid solid none;
border-width:1px 1px 1px 0px;
border-color:#FFFFFF;
background-color:#E3EEC4;
vertical-align:top;
}
.tableeven
{
font-size: 12px;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
border-style:none solid solid none;
border-width:1px 1px 1px 0px;
border-color:#FFFFFF;
background-color:#d3E3A4;
vertical-align:top;
}
.highlight
{
font-size: 12px;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
border-style:none solid solid none;
border-width:1px 1px 1px 0px;
border-color:#9EC630;
background-color:#FFFFFF;
vertical-align:top;
}
</style>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" class="tableborder">
<tr class="tabletitle">
<td class="tabletitle">CheckBox</td>
<td class="tabletitle">Title</td>
<td class="tabletitle">Link</td>
</tr>
<tr class="tableodd">
<td class="tableodd"><input type="checkbox" /></td>
<td class="tableodd"> </td>
<td class="tableodd"><a class="mylink" href="javascript:void(0)">MyLink</a></td>
</tr>
<tr>
<td class="tableeven"><input type="checkbox" /></td>
<td class="tableeven"> </td>
<td class="tableeven"><a class="mylink" href="javascript:void(0)">MyLink</a></td>
</tr>
<tr>
<td class="tableodd"><input type="checkbox" /></td>
<td class="tableodd"> </td>
<td class="tableodd"><a class="mylink" href="javascript:void(0)">MyLink</a></td>
</tr>
<tr>
<td class="tableeven" ><input type="checkbox" /></td>
<td class="tableeven"> </td>
<td class="tableeven"><a class="mylink" href="javascript:void(0)">MyLink</a></td>
</tr>
</table>
</body>
</html>
Jquery Part:
$(document).ready(function()
{
$('td input[type="checkbox"]').live('click',function(){
if($(this).attr('noclass')!='1')
{
if ($(this).is(':checked')){
anyrowschecked=1;
$(this).parent().addClass('highlight');
$(this).parent().siblings().addClass('highlight');
} else if($(this).parent().is('.highlight')) {
$(this).parent().removeClass('highlight');
$(this).parent().siblings().removeClass('highlight');
}
}
});
$('td .deletecontent').live('click',function(){
var selected=$(this).parent().attr('class');
if(selected.indexOf("highlight")!=-1)
{
alert('You are doing deletion.This will delete the entire data');
var yes= confirm("Do you really want to delete??");
if(yes)
{
alert("Do Whatever You want");
}
}
else
{
alert('Please ensure you are deleting the selected row');
}
});
});
