css hover on a table with rowspan

Question

css hover on a table with rowspan

Navigation

#1 by (1 votes)

0

Table - Example

table,
th,
td {
  border: 1px solid black;
}

tr:hover {
  background-color:coral;
}

<table>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>Dados1</td>
    <td>Dados1</td>
    <td rowspan="2">Dados1 Rowspan</td>
  </tr>
  <tr>
    <td>Dados1</td>
    <td>Dados1</td>
  </tr>

  <tr>
    <td>Dados2</td>
    <td>Dados2</td>
    <td rowspan="2">Dados2 Rowspan</td>
  </tr>
  <tr>
    <td>Dados2</td>
    <td>Dados2</td>
  </tr>



</table>

How can I use the hover effect to change the color of the full line as in the image below?

Example :

html css

asked by anonymous 24.10.2017 / 14:10

1 answer

Create a list with a Model and an Int in C # Input added with .append () does not send the POST data

score 1 · Accepted Answer

Using Jquery:

Add in your <tr> a same class that represents the content line.

Once this is done, Jquery will capture the event of hovering over <tr> after that it will get its class and assign background-color to all other <tr> that have the same class. p>

$('tr').hover(function(){

  var mudar = $(this).attr('class');
  
  $('.'+mudar).css('background-color','coral');

},function(){

     var mudar = $(this).attr('class');
  
  $('.'+mudar).css('background-color','#fff');

});

table,
th,
td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tr><th>Col1</th><th>Col2</th><th>Col3</th></tr><trclass='linha1'><td>Dados1</td><td>Dados1</td><tdrowspan="2">Dados1 Rowspan</td>
  </tr>
  <tr class='linha1'>
    <td>Dados1</td>
    <td>Dados1</td>
  </tr>

  <tr class='linha2'>
    <td>Dados2</td>
    <td>Dados2</td>
    <td rowspan="2">Dados2 Rowspan</td>
  </tr>
  <tr class='linha2'>
    <td>Dados2</td>
    <td>Dados2</td>
  </tr>



</table>