Resizing tables in vanilla JavaScript without affecting positioning

问题

I'm trying to resize a th element without affecting the position of the next th in the row, for example I want that the width of the th would affect the width of the next th accordingly not pushing it to the left.

Here's my code that I have already.

    (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;
    });
})();

A working sample of my code.

(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

Thanks!

回答1:

Hey guys I figured it out. here's the code.

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;
  });
}

}

来源：https://stackoverflow.com/questions/48883679/resizing-tables-in-vanilla-javascript-without-affecting-positioning