highlight selected row and column on mouseover in html table
Question
I have a requirement to highlight row and column of the cell in the table on mouseover.The table generated is dynamic which i'm getting the values from database and displaying in the html table. The structure of the table is exactly as shown below and i cannot modify the existing structure. Please suggest with my existing html code how can i highlight selected row and column in a table either using jquery/css. Please find the fiddle http://jsfiddle.net/0w9yo8x6/78/ .
Below is the html code:
<div>
<table border="1px">
<tr>
<td>
<table style="width:100%">
<tr title="Table Header">
<td>
Title
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1px">
<tr>
<td></td>
<td bgcolor="grey">Header1</td>
<td bgcolor="grey">Header2</td>
<td bgcolor="grey">Header3</td>
<td bgcolor="grey">Header4</td>
<td bgcolor="grey">Header5</td>
</tr>
<tr>
<td bgcolor="grey">Row1</td>
<td>
<table>
<tr>
<td>
Cell1
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell1
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell1
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell1
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell1
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell1
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell1
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell1
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell1
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell1
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="grey">Row2</td>
<td>
<table>
<tr>
<td>
Cell2
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell2
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell2
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell2
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell2
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell2
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell2
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell2
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell2
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell2
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="grey">Row3</td>
<td>
<table>
<tr>
<td>
Cell3
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell3
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell3
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell3
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell3
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell3
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell3
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell3
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell3
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell3
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
4 answers
solution1
8 ACCPTED 2015-02-04 16:04:19
highlights specific row and column. for the columns i used nth-child() as part of the selector. hope this helps.
note: i added class .myCell to the tds of the 2nd level nested table for more ease in selector name for jquery.
$(document).ready(function() { $('.myCell').on('mouseover', function() { $(this).closest('tr').addClass('highlight'); $(this).closest('table').find('.myCell:nth-child(' + ($(this).index() + 1) + ')').addClass('highlight'); }); $('.myCell').on('mouseout', function() { $(this).closest('tr').removeClass('highlight'); $(this).closest('table').find('.myCell:nth-child(' + ($(this).index() + 1) + ')').removeClass('highlight'); }); });
.highlight { background-color:lightgray; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <table border="1px"> <tr> <td> <table style="width:100%"> <tr title="Table Header"> <td> Title </td> </tr> </table> </td> </tr> <tr> <td> <table border="1px"> <tr> <td></td> <td bgcolor="grey">Header1</td> <td bgcolor="grey">Header2</td> <td bgcolor="grey">Header3</td> <td bgcolor="grey">Header4</td> <td bgcolor="grey">Header5</td> </tr> <tr> <td bgcolor="grey" class="myCell">Row1</td> <td class="myCell"> <table> <tr> <td> Cell1 </td> </tr> <tr> <td class='innerCell'> Inner cell1 </td> </tr> </table> </td> <td class="myCell"> <table> <tr> <td> Cell1 </td> </tr> <tr> <td class='innerCell'> Inner cell1 </td> </tr> </table> </td> <td class="myCell"> <table> <tr> <td> Cell1 </td> </tr> <tr> <td class='innerCell'> Inner cell1 </td> </tr> </table> </td> <td class="myCell"> <table> <tr> <td> Cell1 </td> </tr> <tr> <td class='innerCell'> Inner cell1 </td> </tr> </table> </td> <td class="myCell"> <table> <tr> <td> Cell1 </td> </tr> <tr> <td class='innerCell'> Inner cell1 </td> </tr> </table> </td> </tr> <tr> <td bgcolor="grey" class="myCell">Row2</td> <td class="myCell"> <table> <tr> <td> Cell2 </td> </tr> <tr> <td class='innerCell'> Inner cell2 </td> </tr> </table> </td> <td class="myCell"> <table> <tr> <td> Cell2 </td> </tr> <tr> <td class='innerCell'> Inner cell2 </td> </tr> </table> </td> <td class="myCell"> <table> <tr> <td> Cell2 </td> </tr> <tr> <td class='innerCell'> Inner cell2 </td> </tr> </table> </td> <td class="myCell"> <table> <tr> <td> Cell2 </td> </tr> <tr> <td class='innerCell'> Inner cell2 </td> </tr> </table> </td> <td class="myCell"> <table> <tr> <td> Cell2 </td> </tr> <tr> <td class='innerCell'> Inner cell2 </td> </tr> </table> </td> </tr> <tr> <td bgcolor="grey" class="myCell">Row3</td> <td class="myCell"> <table> <tr> <td> Cell3 </td> </tr> <tr> <td class='innerCell'> Inner cell3 </td> </tr> </table> </td> <td class="myCell"> <table> <tr> <td> Cell3 </td> </tr> <tr> <td class='innerCell'> Inner cell3 </td> </tr> </table> </td> <td class="myCell"> <table> <tr> <td> Cell3 </td> </tr> <tr> <td class='innerCell'> Inner cell3 </td> </tr> </table> </td> <td class="myCell"> <table> <tr> <td> Cell3 </td> </tr> <tr> <td class='innerCell'> Inner cell3 </td> </tr> </table> </td> <td class="myCell"> <table> <tr> <td> Cell3 </td> </tr> <tr> <td class='innerCell'> Inner cell3 </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </div>
solution2
4 2015-02-04 15:29:56
Since you're nesting tables two deep, your CSS should look something like this:
table table tr:hover td {
background-color: #fbc93d;
}
Here's an example based off your fiddle:
Example
solution3
0 2015-02-04 15:29:13
在你的CSS中尝试这个：
td table td:hover{background-color:gray;}
solution4
0 2015-02-04 15:55:24
It is not really great practice putting tables in tables for the sake of it, go check out how to use divs and maybe outline. Also look in to how to create tables using thead, tbody and colgroups.
Hope I could help.
Below is just the HTML code and needs thead and tbody added to it, I'll let you figure that one out.
<table border="1px">
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<tr>
<td></td>
<td bgcolor="grey">Header1</td>
<td bgcolor="grey">Header2</td>
<td bgcolor="grey">Header3</td>
<td bgcolor="grey">Header4</td>
<td bgcolor="grey">Header5</td>
</tr>
<tr>
<td bgcolor="grey">Row1</td>
<td>
<table>
<tr>
<td>
Cell1
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell1
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell1
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell1
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell1
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell1
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell1
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell1
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell1
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell1
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="grey">Row2</td>
<td>
<table>
<tr>
<td>
Cell2
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell2
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell2
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell2
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell2
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell2
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell2
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell2
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell2
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell2
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="grey">Row3</td>
<td>
<table>
<tr>
<td>
Cell3
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell3
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell3
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell3
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell3
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell3
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell3
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell3
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell3
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell3
</td>
</tr>
</table>
</td>
</tr>
</table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jquery to highlight the selected row and column in a table
Highlight the selected row in html table with php
Highlight selected table row
Highlight the row of a table on mouseover using Javascript and CSS
JavaScript Highlight Selected Table Row
Highlight selected row in primeng table
using a Jquery ui Slider to highlight html table row/column
JQuery Highlight Row and Column in table
In my case, How to highlight table row when mouseover?
Toggle Selected Table Row Highlight on Button Click
Related Tags