Demo jQuery Table Row Column Highlight on Hover
HTML
<div class="table-row" >
<p class="1">FOO0</p>
<p class="1">FOO1</p>
<p class="1">FOO2</p>
<p class="2">FOO3</p>
<p class="1">FOO4</p>
<p class="2">FOO5</p>
<p class="2">FOO6</p>
<p class="2">FOO7</p>
<p class="3">FOO8</p>
<p class="2">FOO9</p>
<p class="2">FOO9</p>
<p class="3">FOO10</p>
<p class="3">FOO11</p>
<p class="3">FOO12</p>
<p class="4">FOO13</p>
<p class="3">FOO14</p>
<p class="4">FOO15</p>
<p class="4">FOO16</p>
<p class="4">FOO17</p>
<p class="5">FOO18</p>
<p class="4">FOO19</p>
<p class="6">FOO19</p>
</div>
CSS
body{width:610px;}
.current-row{background-color:#B24926;color:#FFF;}
.current-col{background-color:#1b1bcb;color:#FFF;}
.tutorial-table{width: 100%;font-size:0.9em;border-top: #e5e5e5 1px solid;border-spacing: initial;margin: 20px 0;word-break: break-word;table-layout: fixed;}
.tutorial-table th.table-header {background-color: #f5f5f5;padding: 5px;text-align: left;padding:10px;}
.tutorial-table .table-row td {padding:10px;}
JavaScript
jQuery(document).ready(
function() {
jQuery('.table-row').hover(
function() {
jQuery('.'+this.className).css("background-color", "#f00");
},
function() {
jQuery('.'+this.className).css("background-color", "");
}
);
}
);