CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Didier mac cormick
Didier mac cormick

Reputation: 183

How to highlight rows in a table with jquery

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>

Upvotes: 4

Views: 127

Answers (3)

user4602228
user4602228

Reputation:

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

Upvotes: 0

Rajesh
Rajesh

Reputation: 24915

Logic

  1. Bind mouse events on every element.
  2. Create a map for elements where parent is to be considered.
  3. Now, on hover, just check if map has value for this element type.
  4. If yes, fetch parent selector and navigate to it.
  5. If not, use current element as default element.
  6. Remove class from any other element
  7. 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>

Upvotes: 0

John Bupit
John Bupit

Reputation: 10618

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>

Upvotes: 5

Related Questions