HTML-таблица с изменяемыми размерами столбцов с использованием ширины в процентах - PullRequest
Новая
       14

HTML-таблица с изменяемыми размерами столбцов с использованием ширины в процентах

0 голосов
/ 15 января 2019

Существует множество решений для таблиц с изменяемыми размерами. Но у всех них есть общее, что они используют ширину в пикселях, а не в процентах.

В моем случае ширины столбцов в моих таблицах должны быть в процентах от ширины или, по крайней мере, в процентах от ширины после действия изменения размера. Мое реализованное решение содержит ошибку при запуске изменения размера.

http://jsfiddle.net/bg843pkt/24/

var thElm;
var startOffset;

var eG;

Array.prototype.forEach.call(
  document.querySelectorAll("table th"),
  function (th) {
    th.style.position = 'relative';

    var grip = document.createElement('div');
    grip.innerHTML = " ";
    grip.style.top = 0;
    grip.style.right = 0;
    grip.style.bottom = 0;
    grip.style.width = '5px';
    grip.style.position = 'absolute';
    grip.style.cursor = 'col-resize';
    grip.addEventListener('mousedown', function (e) {
        thElm = th;
        startOffset = th.offsetWidth - e.pageX;
    });

    th.appendChild(grip);
  });

document.addEventListener('mousemove', function (e) {
  if (thElm) {
    thElm.style.width = startOffset + e.pageX + '%';
    eG = e.pageX;
  }
});

document.addEventListener('mouseup', function () {
    thElm = undefined;
});

Как это действует

Как это должно действовать

Может кто-нибудь сказать мне, как я могу реализовать эту функцию с процентной шириной без каких-либо ошибок поведения?

1 Ответ

0 голосов
/ 15 января 2019

Я создал рабочий пример, но он использует более старую версию jQuery.

http://jsfiddle.net/Ln280eqc/17/

    $("table").resizableColumns();

Источник: https://github.com/dobtco/jquery-resizable-columns

...