CODEWITHSUNDEEP
javascriptjquery
Jason Kelly
Jason Kelly

Reputation: 2655

Moving the div container scroll position reative to the nth row in an HTML table row

Fellow Gurus and Experts, I am seeking your help in attempting to move the div scroll position in the center position relative to the target Nth row (using the index) in an HTML table.

At the request of a user on this site, I have reformed my existing code to match the javascript function in question that requires further modification below.

How can I add on functionality to my existing jQuery javascript code using the function highlight() to not only highlight the specified target row, but to also move the div container scroll position in sync to the center position, relative to the target Nth row in an HTML table?

For ease of reference, I have created a fiddle as well: http://jsfiddle.net/3YbSe/1/

I am jQuery friendly :)

function highlight(tableIndex) {

    // Just a simple check. If .highlight has reached the last, start again
    if( (tableIndex+1) > rowCount) {

        tableIndex = 0;
    }
    // Element exists?
    if($('#data tbody tr:eq('+tableIndex+')').length > 0) {
        // Remove other highlights
        $('#data tbody tr').removeClass('highlight');

        // Highlight your target
        $('#data tbody tr:eq('+tableIndex+')').addClass('highlight');

        $("#rownum").val(tableIndex+1)   
    }
    else {
        $("#rownum").val(0) 
    }
}

HTML Markup:

<!DOCTYPE html>

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<style type="text/css">
#data_container {
    height: 100px;
    border: 1px solid red;
    width: auto;
    overflow: scroll;
}
.highlight {

    background-color: rgb(255,0,0);

}

</style>

<script type="text/javascript">

window.onload = function() {

var rowCount = $('#data tbody tr').length

$("#maxrows").val(rowCount)

function highlight(tableIndex) {

    // Just a simple check. If .highlight has reached the last, start again
    if( (tableIndex+1) > rowCount) {

        tableIndex = 0;
    }
    // Element exists?
    if($('#data tbody tr:eq('+tableIndex+')').length > 0) {
        // Remove other highlights
        $('#data tbody tr').removeClass('highlight');

        // Highlight your target
        $('#data tbody tr:eq('+tableIndex+')').addClass('highlight');

        $("#rownum").val(tableIndex+1)   
    }
    else {
        $("#rownum").val(0) 
    }
}



$( "#data tbody tr" ).click(function() {
    highlight($(this).index());
});


}


</script>

</head>

<body>


<div id="data_container">
<table id="data" border="1" cellspacing="1" cellpadding="1">

    <thead>
        <tr>
            <th>#</th>
            <th>Color</th>
            <th>Fruit</th>
            <th>Name</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>red</td>
            <td>kiwi</td>
            <td>Lindsay</td>
            <td>closed</td>
        </tr>
        <tr>
            <td>2</td>
            <td>blue</td>
            <td>mangos</td>
            <td>Sarah</td>
            <td>open</td>
        </tr>
        <tr>
            <td>3</td>
            <td>green</td>
            <td>oranges</td>
            <td>Joseph</td>
            <td>hold</td>
        </tr>
        <tr>
            <td>4</td>
            <td>yellow</td>
            <td>pears</td>
            <td>Jenny</td>
            <td>open</td>
        </tr>
        <tr>
            <td>5</td>
            <td>orange</td>
            <td>bananas</td>
            <td>Mike</td>
            <td>closed</td>
        </tr>
        <tr>
            <td>6</td>
            <td>purple</td>
            <td>lemon</td>
            <td>Jerry</td>
            <td>open</td>
        </tr>
        <tr>
            <td>7</td>
            <td>teal</td>
            <td>apples</td>
            <td>Larry</td>
            <td>hold</td>
        </tr>
    </tbody>
</table>
</div>
Row Number:
<br>
<input type="text" id="rownum"><br>
of
<br>
<input type="text" id="maxrows" readonly>
</body>
</html>

Upvotes: 0

Views: 2492

Answers (1)

Ian
Ian

Reputation: 653

Ok, I think I figured out what you are trying to accomplish. You can use the position() function for this, and then a little bit of simple math. You will also need to give your table a position so that you can check the position of the highlighted <tr> to the table it's in instead of the container. Here's some codez:

//Scroll to cntr position
var trPos = $("tr.highlight").position();        
var trCtr = ($("tr.highlight").height()) / 2;
var dataTblctr = ($("#data_container").height()) / 2;

$("#data_container").scrollTop(trPos.top - dataTblctr + trCtr);

DEMO

Upvotes: 1

Related Questions