JavaScript Dragscroll не работает с таблицей HTML - PullRequest
Новая
       10

JavaScript Dragscroll не работает с таблицей HTML

0 голосов
/ 15 мая 2018

Я пытаюсь создать таблицу с фиксированным заголовком и левым столбцом, которую я могу свободно прокручивать.Я хочу иметь возможность реализовать прокрутку с помощью метода перетаскивания для прокрутки с помощью клиентской мыши.Всякий раз, когда я пытаюсь реализовать функцию dragscroll, я не могу заставить ее работать.Как правильно внедрить dragscroll в созданную таблицу?

HTML: 

<div class="dragscroll">
      <script>
        var sysDate = new Date();
        var sysDay = new Date();
        var sysMonth = new Date();
        var dayCount = sysDay.getDay();
        var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        var emps = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M",
                    "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
        var drawTable = '<table>';
        drawTable += "<thead>";
        drawTable += "<tr>";
        drawTable += "<th></th>";
        for (let i = sysDate.getDate() - 7; i <= sysDate.getDate() + 7; i++) {
          drawTable += "<th>" + weekdays[sysDay.getDay()] + " " + sysMonth.getMonth() + "/" + i + "</th>";
        }
        drawTable += "</tr>";
        drawTable += "</thead>";
        drawTable += "<tbody>";
        for (let i = 0; i < emps.length; i++) {
          drawTable += '<tr>';
          drawTable += "<td>Employee " + emps[i] + "</td>";
          for (let j = sysDate.getDate() - 7; j <= sysDate.getDate() + 7; j++) {
            drawTable += "<td></td>";
          }
          drawTable += '</tr>';
        }
        drawTable += "</tbody>";
        drawTable += "</table>";
        document.write(drawTable);
      </script>
    </div>

Dragscroll JS: https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js

JSFiddle: https://jsfiddle.net/a7esqent/#&togetherjs=wPxuoQcPGr

Спасибо, что уделили время!

1 Ответ

0 голосов
/ 15 мая 2018

Вместо того, чтобы помещать 'class = "dragscroll"' в div, я поместил его в начало тела, где создается основная часть таблицы. 

<script>
      var sysDate = new Date();
      var sysDay = new Date();
      var sysMonth = new Date();
      var dayCount = sysDay.getDay();
      var weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
      var emps = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M",
                  "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
      var drawTable = '<table>';
      drawTable += "<thead>";
      drawTable += "<tr>";
      drawTable += "<th></th>";
      for (let i = sysDate.getDate() - 7; i <= sysDate.getDate() + 7; i++) {
        drawTable += "<th>" + weekdays[sysDay.getDay()] + " " + sysMonth.getMonth() + "/" + i + "</th>";
      }
      drawTable += "</tr>";
      drawTable += "</thead>";
      drawTable += '<tbody class="dragscroll">';
      for (let i = 0; i < emps.length; i++) {
        drawTable += '<tr>';
        drawTable += "<td>Employee " + emps[i] + "</td>";
        for (let j = sysDate.getDate() - 7; j <= sysDate.getDate() + 7; j++) {
          drawTable += "<td></td>";
        }
        drawTable += '</tr>';
      }
      drawTable += "</tbody>";
      drawTable += "</table>";
      document.write(drawTable);
    </script>
...