How to auto-scroll a related html table

Question

I have 2 tables, and they are related, because they are showing the same in different languages. When I press Key down or Key up , the item inside my clicked table moves and scrolls down, but not the related one. How can I make this?

Here is a piece of the html5 code:

<div id="first_table">
    <table id="first_header">
      <tr>
        <th class="field_1">1</th>                
        <th class="field_2">2</th>
        <th class="field_3">3</th>
        <th class="field_4">4</th>
        <th class="field_5">5</th>
      </tr>
    </table>
    <div id="first_table_container">
      <table id="first_text_table">
       <tbody id="first_text_table_body">
       </tbody>
      </table>
    </div>
    <div id="first_current">
     <textarea id="first_current_text" ></textarea>                           
     </div> 
</div>

<div id="second_table">
    <table id="second_header">
      <tr>
        <th class="field_1">1</th>                
        <th class="field_2">2</th>
        <th class="field_3">3</th>
        <th class="field_4">4</th>
        <th class="field_5">5</th>
      </tr>
    </table>
    <div id="second_table_container">
      <table id="second_text_table">
       <tbody id="second_text_table_body">
       </tbody>
      </table>
    </div>
    <div id="second_current">
     <textarea id="second_current_text" ></textarea>                           
     </div> 
</div>

Here the CSS:

#first_table
{
width:90%;
float: left;
border-radius: 5px;
border-color: black;                                
border-collapse: collapse;    
margin-right:33px;
margin-bottom: 1%; 
}       
#second_table
{
width:90%;
float: right;
border-radius: 5px;
border-color: black;                                
border-collapse: collapse;    
margin-right:30px;
margin-bottom: 1%; 
}
#first_table_container, #second_table_container 
{
height: 200px;
overflow-y: scroll;
border-style: solid;
border-width: 0px;
border-color: #5e5e5e;                           
border-bottom-width:1px;
}

And now the javasrcipt (jQuery) code:

if (e.keyCode == 38) { // up
                var index = $('#first_text_table_body tr > td').index();
                $('#second_text_table_body').scrollTo(index);
}

I've tried scrollTo() , but I can't make it works properly. My goal is, if I press key up , my first list scrolls up and the second list has to scroll up as well.

Thank you!

Answer 1

JSFiddle

HTML

<div id="first_table">
    <table id="first_header">
        <tr>
            <th class="field_1">1</th>
            <th class="field_2">2</th>
            <th class="field_3">3</th>
            <th class="field_4">4</th>
            <th class="field_5">5</th>
        </tr>
    </table>
    <div id="first_table_container">
        <table id="first_text_table">
            <tbody id="first_text_table_body">
                <tr>
                    <td>abc</td>
                    <tr>
                        <td>abc</td>
                    </tr>
                    <tr>
                        <td>abc</td>
                    </tr>
                    <tr>
                        <td>abc</td>
                    </tr>
                    <tr>
                        <td>abc</td>
                    </tr>
                    <tr>
                        <td>abc</td>
                    </tr>
                    <tr>
                        <td>abc</td>
                    </tr>
                    <tr>
                        <td>abc</td>
                    </tr>
                    <tr>
                        <td>abc</td>
                    </tr>
                    <tr>
                        <td>abc</td>
                    </tr>
                    <tr>
                        <td>abc</td>
                    </tr>
                    <tr>
                        <td>abc</td>
                    </tr>
                    <tr>
                        <td>abc</td>
                    </tr>
                    <tr>
                        <td>abc</td>
                    </tr>
                    <tr>
                        <td>abc</td>
                    </tr>
                    <tr>
                        <td>abc</td>
                    </tr>
                    <tr>
                        <td>abc</td>
                    </tr>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="first_current">
        <textarea id="first_current_text"></textarea>
    </div>
</div>
<div id="second_table">
    <table id="second_header">
        <tr>
            <th class="field_1">1</th>
            <th class="field_2">2</th>
            <th class="field_3">3</th>
            <th class="field_4">4</th>
            <th class="field_5">5</th>
        </tr>
    </table>
    <div id="second_table_container">
        <table id="second_text_table">
            <tbody id="second_text_table_body"></tbody>
            <tr>
                <td>abc</td>
                <tr>
                    <td>abc</td>
                </tr>
                <tr>
                    <td>abc</td>
                </tr>
                <tr>
                    <td>abc</td>
                </tr>
                <tr>
                    <td>abc</td>
                </tr>
                <tr>
                    <td>abc</td>
                </tr>
                <tr>
                    <td>abc</td>
                </tr>
                <tr>
                    <td>abc</td>
                </tr>
                <tr>
                    <td>abc</td>
                </tr>
                <tr>
                    <td>abc</td>
                </tr>
                <tr>
                    <td>abc</td>
                </tr>
                <tr>
                    <td>abc</td>
                </tr>
                <tr>
                    <td>abc</td>
                </tr>
                <tr>
                    <td>abc</td>
                </tr>
                <tr>
                    <td>abc</td>
                </tr>
                <tr>
                    <td>abc</td>
                </tr>
                <tr>
                    <td>abc</td>
                </tr>
            </tr>
        </table>
    </div>
    <div id="second_current">
        <textarea id="second_current_text"></textarea>
    </div>
</div>

CSS

#first_table {
    width:45%;
    float: left;
    border-radius: 5px;
    border-color: black;
    border-collapse: collapse;
    margin-right:33px;
    margin-bottom: 1%;
}
#second_table {
    width:45%;
    float: right;
    border-radius: 5px;
    border-color: black;
    border-collapse: collapse;
    margin-right:30px;
    margin-bottom: 1%;
}
#first_table_container, #second_table_container {
    height: 200px;
    overflow-y: scroll;
    border-style: solid;
    border-width: 0px;
    border-color: #5e5e5e;
    border-bottom-width:1px;
}

JS

$(document).ready(function () {
    $(document).keydown(function (e) {
        console.log(e);
        if (e.keyCode == 38) { //up
            $("#first_table_container").animate({
                scrollTop: 0
            });
            $("#second_table_container").animate({
                scrollTop: 0
            });
        }
        if (e.keyCode == 40) { //down
            $("#first_table_container").animate({
                scrollTop: 200
            });
            $("#second_table_container").animate({
                scrollTop: 200
            });
        }
    });
});

I used scrollTop instead, it just need a value of where to go. my solution is just to get you starting. you can continue this to calculate the scrollTop value you want to set on each click..

You should also clean the code.