How to highlight rows in a table with jquery
Question
I have a simple jquery script to highlight DOM element on hover. But this script failed to highlight the rows of my table, there're no problem with cells.
In my script, I need to be able to select any type of elements, not just tables, so I cant't code a solution based on table selection, like DataTables for example. Any suggestions?
$(document).ready(function() { $("body").on('mouseover', function(event) { var highlightTarget = $(event.target); highlightTarget.addClass("highlight"); }).on('mouseout', function(event) { $(event.target).removeClass('highlight'); }); });
.highlight { border: 1px solid green; background-color: darkseagreen; z-index: 99999; } .main { border-top: 1px solid #9EBACF; border-bottom: 1px solid #FFFFFF; border-left: 1px solid #9EBACF; border-right: 1px solid #FFFFFF; } .cat { border-top: 1px solid #FFFFFF; border-bottom: 1px solid #9EBACF; border-left: 1px solid #FFFFFF; border-right: 1px solid #9EBACF; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="main" cellspacing="0" cellpadding="4"> <tr> <td class="cat">data 1</td> <td class="cat">data 2</td> </tr> <tr> <td class="cat">data 3</td> <td class="cat">data 4</td> </tr> <tr> <td class="cat">data 5</td> <td class="cat">data 6</td> </tr> </table>
3 answers
solution1
5 2017-01-23 11:54:56
One way of doing this using CSS would be to use the :hover selector.
.hoverable:hover {
background: rgba(150, 150, 150, 0.5);
}
All elements of class .hoverable will be highlighted. Note that in the following example, on hovering the first row, both <tr> and <td> are highlighted. In the second row, only the <td> is highlighted, while in the third row, only the <tr> is highlighted.
.hoverable:hover { background: rgba(180, 180, 180, 0.5); }
<table class="main" cellspacing="0" cellpadding="4"> <tr class="hoverable"> <td class="hoverable">data 1</td> <td class="hoverable">data 2</td> </tr> <tr> <td class="hoverable">data 3</td> <td class="hoverable">data 4</td> </tr> <tr class="hoverable"> <td>data 5</td> <td>data 6</td> </tr> </table>
solution2
0 2017-01-23 12:08:07
Logic
- Bind mouse events on every element.
- Create a map for elements where parent is to be considered.
- Now, on hover, just check if map has value for this element type.
- If yes, fetch parent selector and navigate to it.
- If not, use current element as default element.
- Remove class from any other element
- Add class to stored element.
Note: step 6 is required because, you will have a div . This div will have a table and on till td , but you just want to access current element and not all.
Sample
$(document).ready(function() { createHover() }); function createHover() { const map = { "TD": "tr" } $(document).on('mouseenter mouseout', '*', function(e) { var myClass = "highlight" var parent = map[this.nodeName]; var $this = $(this) var el = $this; $('.' + myClass).removeClass(myClass) if (parent) { el = $this.closest(parent) } el.toggleClass(myClass, $this.is(":hover")) e.stopPropagation() }) }
.highlight { border: 1px solid green; background-color: darkseagreen; } .main { border-top: 1px solid #9EBACF; border-bottom: 1px solid #FFFFFF; border-left: 1px solid #9EBACF; border-right: 1px solid #FFFFFF; } .cat { border-top: 1px solid #FFFFFF; border-bottom: 1px solid #9EBACF; border-left: 1px solid #FFFFFF; border-right: 1px solid #9EBACF; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <body> <table class="main" cellspacing="0" cellpadding="4"> <tr> <td class="cat"> <strong>Edge case</strong> </td> <td class="cat">data 2</td> </tr> <tr> <td class="cat">data 3</td> <td class="cat">data 4</td> </tr> <tr> <td class="cat">data 5</td> <td class="cat">data 6</td> </tr> </table> <ul> <li>This is a test</li> </ul> <p>This is also a test</p> </body>
solution3
0 2017-01-23 14:08:39
you don't need JS for that, simple css hover would do it :
.cat:hover{
border: 1px solid green;
background-color: darkseagreen;
z-index: 99999;
}
you dont need .highlight either
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.