如何自动滚动相关的HTML表格

Question

我有2个表，它们是相关的，因为它们以不同的语言显示相同的表。 当我按下Key down或Key up ，单击的表中的项目会移动并向下滚动，但不会滚动相关的项目。 我该怎么做？

这是一段html5代码：

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

这是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;
}

现在是javasrcipt（jQuery）代码：

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

我已经尝试过scrollTo() ，但无法使其正常运行。 我的目标是，如果按key up ，则第一个列表将向上滚动，第二个列表也必须向上滚动。

谢谢！

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

我改用了scrollTop ，它只需要一个值即可。 我的解决方案只是让您入门。 您可以继续进行此操作，以计算每次单击时要设置的scrollTop值。

您还应该清除代码。