Thursday, October 9, 2014

Scroll to a specific row of the table using Jquery

Following example show  how to scroll to a specific row of the table in a div with overflow set to true. 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.

This example can be quickly tested on jsfiddle: http://jsfiddle.net/sanjayingole/z9gw3rb7/2/embedded/result/

  <html>
<head>
<style>
body { background-color: #EFFFEF; color: #000000; }

.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;
}

</style>

 <script>
function scrollIntoView(element, container) {
  var containerTop = $(container).scrollTop();
  var containerBottom = containerTop + $(container).height();
  var elemTop = element.offsetTop;
  var elemBottom = elemTop + $(element).height();
  $('tr[rel="deprow"]').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;
    });
});
</script>

</head>
<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 href="dep03" rel="testclick" class="empLink">E06</a></td>
                <td  class="column">Paula Abdul</td>
                <td  class="column">Admin Officer</td>
                <td  class="column">ADMIN Dept</td>
            </tr>    
            <tr class="row">
                <td class="column"><a href="dep04" rel="testclick" class="empLink">E07</a></td>
                <td  class="column">Tom Hanks</td>
                <td  class="column">Analyst</td>
                <td  class="column">R&amp;D</td>
            </tr>    
    </tbody>
    </table>
    </div>
<div id="departDiv" class="tableDiv">
    <table>
        <tbody>
            <tr id="dep01" class="row" rel="deprow">
                <td class="column">DEP01</td>
                <td  class="column">IT & Development</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr>
         <tr id="dep00" class="row even" rel="deprow">
                <td class="column">TEST</td>
                <td  class="column">TEST Depart</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr>
            <tr id="dep00" class="row" rel="deprow">
                <td class="column">TEST</td>
                <td  class="column">TEST Depart</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr>
            <tr id="dep02" class="row even" rel="deprow">
                <td class="column">DEP02</td>
                <td  class="column">HR Depart</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr> <tr id="dep00" class="row" rel="deprow">
                <td class="column">TEST</td>
                <td  class="column">TEST Depart</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr> <tr id="dep00" class="row even" rel="deprow">
                <td class="column">TEST</td>
                <td  class="column">TEST Depart</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr> <tr id="dep00" class="row" rel="deprow">
                <td class="column">TEST</td>
                <td  class="column">TEST Depart</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr>
            <tr id="dep03" class="row even" rel="row">
                <td class="column">DEP03</td>
                <td  class="column">Admin Department</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr> <tr id="dep00" class="row" rel="deprow">
                <td class="column">TEST</td>
                <td  class="column">TEST Depart</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr> <tr id="dep00" class="row even" rel="deprow">
                <td class="column">TEST</td>
                <td  class="column">TEST Depart</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr> <tr id="dep00" class="row" rel="deprow">
                <td class="column">TEST</td>
                <td  class="column">TEST Depart</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr> <tr id="dep00" class="row even" rel="deprow">
                <td class="column">TEST</td>
                <td  class="column">TEST Depart</td>
                <td  class="column">Chicago</td>
                <td  class="column">Address : 123 ABC St, Chicago IL</td>
            </tr>
            <tr id="dep04" class="row" rel="deprow">
                <td class="column">DEP04</td>
                <td  class="column">Research &amp; Development</td>
                <td  class="column">San Francisco</td>
                <td  class="column">Address : 123 Crookedest St, San Francisco, CA</td>
            </tr>

    </tbody></table>
</div>
</body>

</html>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)