Hover in row and table column



  • I would like to pass the mouse over a table cell the column and the respective cell line to change the background only until the cell. follow an example of how this and how I want you 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 about Helen Bennett



  • 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>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2