Highlight table row and column using jQuery

Posted: June 18, 2012 in Jquery
<!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>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
<script language="javascript">
$(document).ready(function() {
  $('#myTable05 td').css('background-color','grey');
  $('#myTable05 td').mouseover(function() {
	  	$('#myTable05 td').css('background-color','grey');  		
		$(this).siblings().css('background-color','white');
		var ind = $(this).index();
		$('#myTable05 td:nth-child('+(ind+1)+')').css('background-color','white');		
	});
});
</script>
</head>

<body>

<table cellspacing="0" cellpadding="0" border="1" id="myTable05" class="fancyTable fht-table fht-table-init" style="width: 843px; margin-top: -28px;">
      <thead>
        <tr>
          <th>&nbsp;<div class="fht-cell" style="width: 40px;"></div></th>
                      <th title="jim carry">jim<div class="fht-cell" style="width: 121px;"></div></th>
                      <th title="frank mozariano">frank<div class="fht-cell" style="width: 121px;"></div></th>
                      <th title="robert denaro">robert<div class="fht-cell" style="width: 121px;"></div></th>
                      <th title="testing testing">testing<div class="fht-cell" style="width: 121px;"></div></th>
                      <th title="testing testing">testing<div class="fht-cell" style="width: 121px;"></div></th>
                      <th title="testing testing">testing<div class="fht-cell" style="width: 121px;"></div></th>
                  </tr>
      </thead>
      <tbody>
      
      <tr>
      	<td title="Driver Guide Hire" style="height: 61.5px; width: 165.5px;">DGH</td>
      					<td><span>H:<input type="text" value="11.00" name="dhr[1] ?&gt;" size="3"></span><span>D:<input type="text" value="111.00" name="ddl[1];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="22.00" name="dhr[2] ?&gt;" size="3"></span><span>D:<input type="text" value="222.00" name="ddl[2];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="33.00" name="dhr[3] ?&gt;" size="3"></span><span>D:<input type="text" value="333.00" name="ddl[3];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="44.00" name="dhr[18] ?&gt;" size="3"></span><span>D:<input type="text" value="444.00" name="ddl[18];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="5.00" name="dhr[19] ?&gt;" size="3"></span><span>D:<input type="text" value="55.00" name="ddl[19];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="dhr[20] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="ddl[20];  ?&gt;" size="3"></span></td>
			      </tr>
      		<tr class="odd">
        	<td title="PATRIC(Patric transport inc ...)" style="height: 61.5px; width: 165.5px;">PATRIC</td>
							<td><span>H:<input type="text" value="0.00" name="hr[3][1] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[3][1];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[3][2] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[3][2];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[3][3] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[3][3];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[3][18] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[3][18];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[3][19] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[3][19];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[3][20] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[3][20];  ?&gt;" size="3"></span></td>
					</tr>
			<tr>
        	<td title="David(David company)" style="height: 61.5px; width: 165.5px;">David</td>
							<td><span>H:<input type="text" value="0.00" name="hr[5][1] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[5][1];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[5][2] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[5][2];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[5][3] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[5][3];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[5][18] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[5][18];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[5][19] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[5][19];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[5][20] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[5][20];  ?&gt;" size="3"></span></td>
					</tr>
			<tr class="odd">
        	<td title="Mark(Markk company)" style="height: 61.5px; width: 165.5px;">Mark</td>
							<td><span>H:<input type="text" value="0.00" name="hr[6][1] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[6][1];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[6][2] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[6][2];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[6][3] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[6][3];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[6][18] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[6][18];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[6][19] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[6][19];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[6][20] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[6][20];  ?&gt;" size="3"></span></td>
					</tr>
			<tr>
        	<td title="Testing(test client company)" style="height: 61.5px; width: 165.5px;">Testing</td>
							<td><span>H:<input type="text" value="0.00" name="hr[18][1] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[18][1];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[18][2] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[18][2];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[18][3] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[18][3];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[18][18] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[18][18];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[18][19] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[18][19];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[18][20] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[18][20];  ?&gt;" size="3"></span></td>
					</tr>
			<tr class="odd">
        	<td title="Testing(test client company)" style="height: 61.5px; width: 165.5px;">Testing</td>
							<td><span>H:<input type="text" value="0.00" name="hr[19][1] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[19][1];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[19][2] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[19][2];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[19][3] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[19][3];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[19][18] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[19][18];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[19][19] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[19][19];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[19][20] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[19][20];  ?&gt;" size="3"></span></td>
					</tr>
			<tr>
        	<td title="Testing(test client company)" style="height: 61.5px; width: 165.5px;">Testing</td>
							<td><span>H:<input type="text" value="0.00" name="hr[20][1] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[20][1];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[20][2] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[20][2];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[20][3] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[20][3];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[20][18] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[20][18];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[20][19] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[20][19];  ?&gt;" size="3"></span></td>
							<td><span>H:<input type="text" value="0.00" name="hr[20][20] ?&gt;" size="3"></span><span>D:<input type="text" value="0.00" name="dl[20][20];  ?&gt;" size="3"></span></td>
					</tr>
	      
       </tbody>
    </table>
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s