javascript - 用一个滚动条控制两个 HTML 表格

Question

我有两个单独的 table 并排放置，希望高度相同。我希望能够让两者相互通信，这样当我向下滚动右表时，左表也会随之同步滚动。

到目前为止，我能想到的唯一方法是将它们都包含在一个 div 中，但是当我尝试这样做时，这会扰乱我的大小设置。有没有更好的方法让两个表进行通信并同时上下滚动？

HTML:

<!-- Scrollable y-axis line of days above the scheduler -->
  <div id="table-wrapper-days">
    <div id="table-scroll-days">
      <table id="dayRow" class="tableDays">
        <tr>
          <td>Monday 5/7</td>
          <td>Tuesday 5/8</td>
          <td>Wednesday 5/9</td>
          <td>Thursday 5/10</td>
          <td>Friday 5/11</td>
          <td>Saturday 5/12</td>
          <td>Sunday 5/13</td>
          <td>Monday 5/14</td>
          <td>Tuesday 5/15</td>
          <td>Wednesday 5/16</td>
          <td>Thursday 5/17</td>
          <td>Friday 5/18</td>
          <td>Saturday 5/19</td>
          <td>Sunday 5/20</td>
          <td>Monday 5/21</td>
          <td>Tuesday 5/22</td>
          <td>Wednesday 5/23</td>
          <td>Thursday 5/24</td>
          <td>Friday 5/25</td>
          <td>Saturday 5/26</td>
          <td>Sunday 5/27</td>
          <td>Monday 5/28</td>
          <td>Tuesday 5/29</td>
          <td>Wednesday 5/30</td>
          <td>Thursday 5/31</td>
          <td>Friday 6/1</td>
          <td>Saturday 6/2</td>
          <td>Sunday 6/3</td>
        </tr>
      </table>
    </div>
  </div>

  <!-- Scrollable x-axis column of employees to the left of the scheduler -->
  <div id="table-wrapper-employees">
    <div id="table-scroll-employees">
      <table id="employeeCol" class="tableEmployees">
        <tr><td>Employee A</td></tr>
        <tr><td>Employee B</td></tr>
        <tr><td>Employee C</td></tr>
        <tr><td>Employee D</td></tr>
        <tr><td>Employee E</td></tr>
        <tr><td>Employee F</td></tr>
        <tr><td>Employee G</td></tr>
        <tr><td>Employee H</td></tr>
        <tr><td>Employee I</td></tr>
        <tr><td>Employee J</td></tr>
        <tr><td>Employee K</td></tr>
        <tr><td>Employee L</td></tr>
        <tr><td>Employee M</td></tr>
        <tr><td>Employee N</td></tr>
        <tr><td>Employee O</td></tr>
        <tr><td>Employee P</td></tr>
        <tr><td>Employee Q</td></tr>
        <tr><td>Employee R</td></tr>
        <tr><td>Employee S</td></tr>
        <tr><td>Employee T</td></tr>
        <tr><td>Employee U</td></tr>
        <tr><td>Employee V</td></tr>
        <tr><td>Employee W</td></tr>
        <tr><td>Employee X</td></tr>
        <tr><td>Employee Y</td></tr>
        <tr><td>Employee Z</td></tr>
    </table>
  </div>
</div>

<div id="table-wrapper-tasks">
  <div id="table-scroll-tasks">
    <script>
      var rows = document.getElementById('dayRow').getElementsByTagName("td").length;
      var cols = document.getElementById('employeeCol').getElementsByTagName("tr").length;
      var rowT = null;

      var drawTable = '<table class="tableTasks">';
        for (let i = 0; i < rows; i++) {
          drawTable += '<tr>';
          for(let j = 0; j < cols; j++) {
            drawTable += '<td></td>';
          }
          drawTable += '</tr>';
        }
        drawTable += '</table>';

        document.write(drawTable);
      </script>
    </div>
  </div>

CSS:

/* To control the style of the overall table class */
table {
  border: 1px solid black;
  text-align: center;
  table-layout: fixed;
}

th, td {
  border: 1px solid black;
  width: 140px;
  height: 35px;
}

/* Settings for Days row */
.tableDays {
  width: 140px;
}

/* Settings for Employee column */
.tableEmployees {
  line-height: 35px;
}

/* Settings for Tasks table */
.tableTasks {
  width:100%;
  margin-top:5px;
  empty-cells: show;
  height:1000px;
  line-height: 35px;
  width: 100px;
}

.empTaskCont {
  height: 500px;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  padding-bottom: 30px;
}

#table-wrapper-days {
  position: relative;
  width:1064px;
  margin-left: 252px
}

#table-scroll-days {
  height: auto;
  overflow-x: scroll;
}

#table-wrapper-employees {
  position: relative;
  float:left;
  width:18%;
  margin-top:8px;
}

#table-scroll-employees {
  width: auto;
  overflow-y: scroll;
  max-height: 500px;
}

#table-wrapper-tasks {
  position: relative;
  width:81%;
  float:right;
}

#table-scroll-tasks {
  overflow-x: scroll;
  overflow-y: scroll;
  max-height: 522px;
}

.employee-mod-btn{
  float:left;
}

我为我的代码添加了一个 jsfiddle:https://jsfiddle.net/Lqzyw4u4/6/#&togetherjs=5vkFrp9DEa

感谢您的宝贵时间。

Answer 1

如果您需要将表放在两个单独的容器中，则可以使用以下方法使用 JavaScript 来完成此操作:

https://jsfiddle.net/Lqzyw4u4/7/

只需使用onscroll事件，获取滚动位置并将其设置到其他容器。

  function scrollPos(){
    var rightScrollPos = document.getElementById("table-scroll-tasks").scrollTop;

    document.getElementById("table-scroll-employees").scrollTop = rightScrollPos; 

}

  <div id="table-scroll-tasks" onscroll="scrollPos();">