Hover table effect

hover-table

jQuery(document).ready(function(){
  hovertable();
});

function hovertable(){
	jQuery("table.hovertable").delegate('td','mouseover mouseleave', function(e) {
		if (e.type == 'mouseover') {
			jQuery(this).addClass("hover");
			jQuery(this).parent().addClass("hover-row");
			jQuery(this).parents("table").find("colgroup").eq(jQuery(this).index()).addClass("hover-column");
		} else {
			jQuery(this).removeClass("hover");
			jQuery(this).parent().removeClass("hover-row");
			jQuery(this).parents("table").find("colgroup").eq(jQuery(this).index()).removeClass("hover-column");
		}
	});
}

index

<table class="hovertable">
  <colgroup></colgroup>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <colgroup></colgroup>
  <thead>
    <th>US Size</th>
    <th>Waist</th>
    <th>Hip</th>
    <th>Inseam</th>
  </thead>
  <tbody>
    <tr>
      <td>30W</td>
      <td>82.6</td>
      <td>101.3</td>
      <td>85.1</td>
    </tr>
    <tr>
      <td>31W</td>
      <td>85.1</td>
      <td>103.8</td>
      <td>85.1</td>
    </tr>
    <tr>
      <td>32W</td>
      <td>87.6</td>
      <td>106.3</td>
      <td>85.1</td>
    </tr>
    <tr>
      <td>33W</td>
      <td>90.2</td>
      <td>108.9</td>
      <td>85.1</td>
    </tr>
    <tr>
      <td>34W</td>
      <td>92.7</td>
      <td>111.4</td>
      <td>85.1</td>
    </tr>
    <tr>
      <td>36W</td>
      <td>97.8</td>
      <td>116.5</td>
      <td>85.1</td>
    </tr>
    <tr>
      <td>38W</td>
      <td>102.9</td>
      <td>121.6</td>
      <td>85.1</td>
    </tr>
  </tbody>
</table>