JSFiddle - React, Tailwind, and code Playground

by Sanjay Ingole

HTML

<body>
    
    <h1 id="top">Scroll to a specific row of the table in a div with overflow set to true .</h1>
    <p>The example shown here has two tables Employees and Departments.
     On Clicking an employee the second table should scroll to the corresponding Depart row and highlight that row.</p>
    
    <div id="employeeDiv" class="tableDiv empDiv">
     <table>
        <tbody>
           <tr class="row">
                <td class="column"><a href="dep01" rel="testclick" class="empLink">E01</a></td>
                <td  class="column">John Ramsey</td>
                <td  class="column">Software Engineer</td>
                <td  class="column">IT dept</td>
            </tr> 
            <tr class="row even">
                <td class="column"><a href="dep02" rel="testclick" class="empLink">E02</a></td>
                <td  class="column">Lisa Collins</td>
                <td  class="column">HR Manager</td>
                <td  class="column">HR dept</td>
            </tr> 
            <tr class="row">
                <td class="column"><a href="dep01" rel="testclick" class="empLink">E03</a></td>
                <td  class="column">David Beckham</td>
                <td  class="column">Junior Software Engineer</td>
                <td  class="column">IT dept</td>
            </tr> 
            <tr class="row even">
                <td class="column"><a href="dep02" rel="testclick" class="empLink">E04</a></td>
                <td  class="column">Lisa Kudrow</td>
                <td  class="column">Sr HR Manager</td>
                <td  class="column">HR dept</td>
            </tr>    
              <tr class="row">
                <td class="column"><a href="dep01" rel="testclick" class="empLink">E05</a></td>
                <td  class="column">Tom Cruise</td>
                <td  class="column">Architect</td>
                <td  class="column">IT dept</td>
            </tr>     
              <tr class="row even">
                <td class="column"><a...

CSS

body { background-color: #EFFFEF; color: #000000; }
a { color: aqua; }
.tableDiv {
    border : solid 1px #000000;color: #0000FF; margin : 10px; background : #FFEFFF; height : 100px;  float : left; overflow : auto;  
}
.empDiv {
    width : 70%;
}
.empLink {
    color : #0000FF;
}
.column{
    padding-left : 10px;
}
.even {
    background : #EFDFEF;
}

JavaScript

function scrollIntoView(element, container) {
  var containerTop = $(container).scrollTop(); 
  var containerBottom = containerTop + $(container).height(); 
  var elemTop = element.offsetTop;
  var elemBottom = elemTop + $(element).height(); 
  $('tr[class="row"]').removeAttr("style")
  $(element).attr("style", "background : #AFFFA0");
  if (elemTop < containerTop) {
    $(container).scrollTop(elemTop);
  } else if (elemBottom > containerBottom) {
    $(container).scrollTop(elemBottom - $(container).height());
  }
}

$(document).ready(function() {
	$('a[rel="testclick"]').click(function(){
        $('a[rel="testclick"]')
        var containerDiv = document.getElementById('departDiv');
        //var itsme = $( $.attr(this, 'href'));//document.getElementById('itsme');
        var itsme =document.getElementById($.attr(this, 'href'));
        scrollIntoView(itsme, containerDiv);

	    return false;
	}); 
});