如何自動滾動相關的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值。

您還應該清除代碼。