Why is my table column highlighter yellow over permenant green row in my html table

userOmA 0
Viewed 25

Someone kindly helped me with having row and column highlighting and even permenant ones when I click on a cell. However, I'm expecting row 3 col 4 to be green just like row 1 col 2 and I'm not sure why that is.

In other words, the hover highlighting should appear underneath the permanent highlighting

Additional Question: How would you do all this highlighting in ReactJS, would you still use JQuery?

$(function() {
  const removePersistant = () => {
    $('.hovered-per').removeClass("hovered-per");
    $('.hovered-cell').removeClass("hovered-cell");
  };

  $('td').hover(function() {
    $(this).toggleClass('hovered-cell')
    $(this).parent('tr').toggleClass('hovered');
    $('td:eq(' + this.cellIndex + ')', 'tr').toggleClass('hovered');
    $('.hovered-per').removeClass("highlight");
  });

  $('td').click(function() {
    removePersistant();
    //$(this).addClass('hovered-cell')
    $(this).parent('tr').toggleClass('hovered-per');
    $('td:eq(' + this.cellIndex + ')', 'tr').toggleClass('hovered-per');
  });
  $("button").click(removePersistant)
});
table {
  border-spacing: 0px;
}

td {
  border: 1px solid #bbb;
  padding: 0.2em;
}


/* 
tr:first-child, td:first-child {
   background: lightgrey;
}
*/

.hovered-per {
  background-color: green;
  color: white;
}

.hovered {
  background: yellow;
}

.hovered-cell {
  background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript"></script>
<table border="1">
  <tr>
    <td>row1 col1</td>
    <td>row1 col2</td>
    <td>row1 col3</td>
    <td>row1 col4</td>
  </tr>
  <tr>
    <td>row2 col1</td>
    <td>row2 col2</td>
    <td>row2 col3</td>
    <td>row2 col4</td>
  </tr>
  <tr>
    <td>row3 col1</td>
    <td>row3 col2</td>
    <td>row3 col3</td>
    <td>row3 col4</td>
  </tr>
  <tr>
    <td>row4 col1</td>
    <td>row4 col2</td>
    <td>row4 col3</td>
    <td>row4 col4</td>
  </tr>
</table>
<button id='clear'>clear</button>

enter image description here

jquery reactjs
1 Answers

Your issue is that your hovered-per is added to the tr but the hovered is added the td - as the td is rendered "on top" of the tr it gets the style.

You can update your perm style to:

.hovered-per,
.hovered-per.hovered,
.hovered-per > td {

so that it applies to the cells as well as the rows, or you can change the

$(this).parent('tr')

to

$(this).parent('tr').find("td").toggleClass('hovered-per');

Updated snippet:

$(function() {
  const removePersistant = () => {
    $('.hovered-per').removeClass("hovered-per");
    $('.hovered-cell').removeClass("hovered-cell");
  };

  $('td').hover(function() {
    $(this).toggleClass('hovered-cell')
    $(this).parent('tr').toggleClass('hovered');
    $('td:eq(' + this.cellIndex + ')', 'tr').toggleClass('hovered');
    //$('.hovered-per').removeClass("highlight");
  });

  $('td').click(function() {
    removePersistant();
    //$(this).addClass('hovered-cell')
    $(this).parent('tr').toggleClass('hovered-per');
    $('td:eq(' + this.cellIndex + ')', 'tr').toggleClass('hovered-per');
  });
  $("button").click(removePersistant)
});
table {
  border-spacing: 0px;
}

td {
  border: 1px solid #bbb;
  padding: 0.2em;
}

.hovered-per,
.hovered-per.hovered,
.hovered-per > td {
  background-color: green;
  color: white;
}

.hovered {
  background: yellow;
}

.hovered-cell {
  background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript"></script>
<table border="1">
  <tr>
    <td>row1 col1</td>
    <td>row1 col2</td>
    <td>row1 col3</td>
    <td>row1 col4</td>
  </tr>
  <tr>
    <td>row2 col1</td>
    <td>row2 col2</td>
    <td>row2 col3</td>
    <td>row2 col4</td>
  </tr>
  <tr>
    <td>row3 col1</td>
    <td>row3 col2</td>
    <td>row3 col3</td>
    <td>row3 col4</td>
  </tr>
  <tr>
    <td>row4 col1</td>
    <td>row4 col2</td>
    <td>row4 col3</td>
    <td>row4 col4</td>
  </tr>
</table>
<button id='clear'>clear</button>

freedomn-m0
Related