CODEWITHSUNDEEP
jqueryhtmlhtml-tableonclick
pauldx
pauldx

Reputation: 1004

Highlight entire row on mouseover table

I have HTML table like this (self generated by tool):

  1. I am having trouble to highlight the entire row using Jquery
  2. I am trying to achieve if I click one cell it needs to be highlighted and I move to other cell it needs to be not highlighted .

Below is my table but it actually starts with td because its part/inside of other table elements:

<td class="PTChildPivotTable">
<table tabindex="0" id="saw_437_c" cellspacing="0">
<tbody>
<tr>
<td class="TTHC OOLT" id="id1" style="font-family:Arial;font-size:16px;font-style:italic;font-weight:normal;">XYZ</td>
<td class="TTHC PTLC OOLT" id="id2" style="font-family:Arial-Italic;font-size:16px;font-style:normal;font-weight:normal;">PQR</td>
</tr>
<tr>
<td class="TTHC OOLT" id="id3" style="font-family:Arial;font-size:16px;font-style:italic;font-weight:normal;">XYZ2</td>
<td class="TTHC PTLC OOLT" id="id4" style="font-family:Arial-Italic;font-size:16px;font-style:normal;font-weight:normal;">PQR2</td>
</tr>
</tbody></table>
</td>

I am trying below Jquery code and it does highlight one col of one row but not the entire row while hover:

  <style style="text/css">
        /* Define the hover highlight color for the table row */
        .PTChildPivotTable td:hover {
              background-color: #ffff99;
        }

      .PTChildPivotTable tr:hover {
              background-color: #ff0000;
        }

    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

 $("td").on("click", function() {
         $( this ).css({
          "background-color": "#0093e0",
          "border": "10px"
        });
        });

    </script>
  1. The idea is once I mousehover one row the entire <tr> should be highlighted which is 2 TD values as XYZ , PQR . When I hover to next row XYZ2, PQR2 needs to be highlighted. In my code only one value can highlight at a time.
  2. 2nd requirement is, if I click XYZ its background color needs to be blue (#0093e0). When I click PQR, the previous XYZ needs to be white but PQR needs to be blue and same behavior across other cells.

Upvotes: 0

Views: 936

Answers (1)

A. Iglesias
A. Iglesias

Reputation: 2675

Is this what you want?

CSS

.PTChildPivotTable tr:hover {
  background-color: #ff0000 !important;
}

.PTChildPivotTable td.clicked {
  background-color: #0093e0 !important;
  border: 10px !important;
}

JQUERY

$(".PTChildPivotTable td").on("click", function() {
    $(".PTChildPivotTable td").removeClass('clicked')
    $(this).toggleClass('clicked');
});

Here you have a fiddle https://fiddle.jshell.net/rigobauer/8bp2xokc/

You don't mention it, but I guess you're going to need to be able to unselect the highlighted td clicking again on it. Otherwise, you're always going to have one cell selected. If that's the case just change the jQuery a little bit...

$(".PTChildPivotTable td").on("click", function() {
    $(".PTChildPivotTable td").not(this).removeClass('clicked');
    $(this).toggleClass('clicked');
});

I hope it helps

Upvotes: 1

Related Questions