Managing two related tables that display the same information in different languages can be a tricky task. In my case, when I use the Key down or Key up functions, only one table scrolls while the other remains stationary. How can I synchronize their scrolling movements?
Here is a snippet 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>
Below are some CSS rules:
#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;
}
Lastly, let's take a look at the JavaScript (jQuery) code:
if (e.keyCode == 38) { // up
var index = $('#first_text_table_body tr > td').index();
$('#second_text_table_body').scrollTo(index);
}
I've experimented with using scrollTo(), but unfortunately, I haven't been able to achieve the desired synchronization between the two tables. My objective is for both tables to scroll simultaneously when the key up function is triggered.
Thank you in advance!