javascript - 在不影响定位的情况下在普通 JavaScript 中调整表格大小

Question

我试图在不影响行中下一个元素的位置的情况下调整第一个元素的大小，例如，我希望第一个元素的宽度会相应地影响下一个元素的宽度，而不是将其向左推。

这是我已有的代码。

    (function () {
    var thElm;
    var startOffset;

    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 + 'px';
      }
    });

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

我的代码的工作示例。

(function () {
    var thElm;
    var startOffset;

    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 + 'px';
      }
    });

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

table {
    table-layout: fixed;
    width: 100px;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-collapse: collapse;
    overflow-x: auto;
}

table tr {
  box-sizing: content-box;
}

table th {
    height: 50px;
    width: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    box-sizing: border-box;
    user-select: none;
}

  <table>
      <thead>
          <tr style="width: 100%;">
              <th style="width: 300px">th 1</th>
              <th style="width: 150px">th 2</th>
              <th style="width: 300px">th 1</th>
              <th style="width: 150px">th 2</th>
              <th style="width: 300px">th 1</th>
              <th style="width: 150px">th 2</th>
              <th style="width: 300px">th 1</th>
              <th style="width: 150px">th 2</th>
              <th style="width: 300px">th 1</th>
              <th style="width: 150px">th 2</th>
              <th style="width: 300px">th 1</th>
              <th style="width: 150px">th 2</th>
              <th style="width: 300px">th 1</th>
              <th style="width: 150px">th 2</th>
              <th style="width: 300px">th 1</th>
              <th style="width: 150px">th 2</th>
              <th style="width: 300px">th 1</th>
              <th style="width: 150px">th 3</th>
              <th style="width: 300px">th 1</th>
              <th style="width: 150px">th 2</th>
              <th style="width: 300px">th 1</th>
              <th style="width: 150px">th 2</th>
              <th style="width: 300px">th 1</th>
              <th style="width: 150px">th 2</th>
              <th style="width: 300px">th 1</th>
              <th style="width: 150px">th 2</th>
              <th style="width: 300px">th 1</th>
              <th style="width: 150px">th 2</th>
              <th style="width: 300px">th 1</th>
              <th style="width: 150px">th 2</th>
          </tr>
      </thead>
  </table>

codepen

谢谢!

Answer 1

嘿伙计们，我想通了。这是代码。

resizeable() {
let startOffset;

let thElements = this.container.querySelectorAll("th");

for(let i = 0; i < thElements.length; i++) {
  let currentElement = thElements[i];
  currentElement.style.position = 'relative';

  let grip = document.createElement('div');
  grip.innerHTML = "&nbsp;";
  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';

  currentElement.appendChild(grip);

  EventManager.on(grip, 'mousedown', (e)=> {
    let nextItem = thElements[i + 1];
    let currentElement = thElements[i];
    let originalNextItemWidth = nextItem.getBoundingClientRect().width;
    let originalCurrentItemWidth = currentElement.getBoundingClientRect().width;

    startOffset = currentElement.offsetWidth - e.pageX;


    EventManager.on(document.body, 'mousemove', (e)=> {

      // Subtract that difference from the next items width
      if (currentElement) {
        currentElement.style.width = startOffset + e.pageX + 'px';

        let offset = originalCurrentItemWidth - currentElement.getBoundingClientRect().width;
        nextItem.style.width = (originalNextItemWidth + offset) + 'px';

      }
    });
  });

  EventManager.on(document.body, 'mouseup', (e)=> {
    EventManager.off(document.body, 'mousemove');
    currentElement = null;
  });
}