Row hover and table column

Asked

Viewed 611 times

0

I would like that by hovering over a cell in the table the column and the respective row of the cell change the background only to the cell. follows an example of how this and how I want it to stay:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>

inserir a descrição da imagem aqui

In that case my mouse was on Helen Bennett

jquery html5 css3

2 answers

3


See if that helps you. :)

$('td').on('mouseover', function() {
  let elem = [$(this), $(this).prevAll('td'), $(this).parent().prevAll('tr').children('td[data-col=' + $(this).data('col') + ']')];

  $(elem).each(function() {
    $(this).css('background-color', '#ddd');
  });
}).on('mouseout', function() {
  let elem = [$(this), $(this).prevAll('td'), $(this).parent().prevAll('tr').children('td[data-col=' + $(this).data('col') + ']')];

  $(elem).each(function() {
    $(this).css('background-color', 'transparent');
  });
});
th,
td {
  padding: 5px;
  border: #ccc 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td data-col="1">Alfreds Futterkiste</td>
    <td data-col="2">Maria Anders</td>
    <td data-col="3">Germany</td>
  </tr>
  <tr>
    <td data-col="1">Centro comercial Moctezuma</td>
    <td data-col="2">Francisco Chang</td>
    <td data-col="3">Mexico</td>
  </tr>
  <tr>
    <td data-col="1">Ernst Handel</td>
    <td data-col="2">Roland Mendel</td>
    <td data-col="3">Austria</td>
  </tr>
  <tr>
    <td data-col="1">Island Trading</td>
    <td data-col="2">Helen Bennett</td>
    <td data-col="3">UK</td>
  </tr>
  <tr>
    <td data-col="1">Laughing Bacchus Winecellars</td>
    <td data-col="2">Yoshi Tannamuri</td>
    <td data-col="3">Canada</td>
  </tr>
  <tr>
    <td data-col="1">Magazzini Alimentari Riuniti</td>
    <td data-col="2">Giovanni Rovelli</td>
    <td data-col="3">Italy</td>
  </tr>
</table>

  • That’s exactly it, now I’ll try to put on my table that is mounted dynamically thank you.

  • Good! The only thing you have to do is keep the content of each column in the attribute data-col. :D

  • I’m holding but I don’t know why the function isn’t called

  • It worked, as the table is generated dynamically I had to use the setTimeOut function to depos that render everything start the Jquery function.

  • Anything put there. D

0

You can also do it using CSS only:

// para IE 9+ que não suportam clip-path
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
div{
   position: relative;
}

table{
   clip-path: inset(2px 0 0 2px);
}

table tr:first-child th{
   background: #fff;
}

th, td {
  padding: 5px;
  position: relative;
}

td:hover::before
 { 
  content: '';  
  height: 100%;
  top: 0px;
  position: absolute;  
  right: 0px;
  width: 10000px;
  z-index: -1;
  background-color: red;
}

td:hover::after
 { 
  content: '';  
  height: 10000px;
  left: 0;
  position: absolute;  
  bottom: 0px;
  width: 100%;
  z-index: -1;
  background-color: red;
}

/* hack para IE 9+ que não suportam clip-path*/
html[data-useragent*='rv:11.0'] table,
html[data-useragent*='Edge'] table,
html[data-useragent*='MSIE 10.0'] table,
html[data-useragent*='MSIE 9.0'] table{
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(2px, 10000px, 10000px, 2px);
}
<div>
   <table>
     <tr>
       <th>Company</th>
       <th>Contact</th>
       <th>Country</th>
     </tr>
     <tr>
       <td>Alfreds Futterkiste</td>
       <td>Maria Anders</td>
       <td>Germany</td>
     </tr>
     <tr>
       <td>Centro comercial Moctezuma</td>
       <td>Francisco Chang</td>
       <td>Mexico</td>
     </tr>
     <tr>
       <td>Ernst Handel</td>
       <td>Roland Mendel</td>
       <td>Austria</td>
     </tr>
     <tr>
       <td>Island Trading</td>
       <td>Helen Bennett</td>
       <td>UK</td>
     </tr>
     <tr>
       <td>Laughing Bacchus Winecellars</td>
       <td>Yoshi Tannamuri</td>
       <td>Canada</td>
     </tr>
     <tr>
       <td>Magazzini Alimentari Riuniti</td>
       <td>Giovanni Rovelli</td>
       <td>Italy</td>
     </tr>
   </table>
</div>

Browser other questions tagged jquery html5 css3

You are not signed in. Login or sign up in order to post.