使用 append() 插入的 HTML 表格列没有给出预期的行为

问题描述

我正在尝试制作一个交互式表格网格，当您调整边缘大小时，其他表格也将调整大小。到目前为止，一切似乎都正常，直到您必须单击按钮才能添加新列。

预期行为：

如果您尝试拖动前两列的边缘，它们会完美运行。但是，如果您通过单击按钮添加新列，该列会添加到表中，但与其他两个的行为不匹配。如何使用按钮添加所有列以遵循相同的行为？

$(document).ready(function() {
  AddListeners()

  function AddListeners() {
    var thElm;
    var startOffsetX;
    var startOffsetY;

    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;
          startOffsetX = th.offsetWidth - e.pageX;
          startOffsetY = th.offsetHeight - e.pageY;
        });

        th.appendChild(grip);
      });

    document.addEventListener('mousemove',function(e) {
      if (thElm) {
        thElm.style.width = startOffsetX + e.pageX + 'px';
        thElm.style.height = startOffsetY + e.pageY + 'px';
      }
    });

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

var iter = 2;

function AddColumn() {
  var myform = $('#myTable');
  myform.find('tr').each(function() {
    var trow = $(this);
    iter += 1;
    if (trow.index() === 0) {
      trow.append('<th><div style="top: 0px; right: 0px; bottom: 0px; width: 5px; position: absolute; cursor: col-resize;">&nbsp;</div>th ' + iter + '</th>');
    } else {
      trow.append('<td>th ' + iter + '</td>');
    }
  });
}

table {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  border-collapse: collapse;
}

table td {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

table th {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a onclick="AddColumn()">Add column</a>

<table id="myTable">
  <thead>
    <tr>
      <th>th 1</th>
      <th>th 2</th>
    </tr>
  </thead>
</table>

解决方法

您的代码不起作用，因为在调用 $(document).ready 的回调时，事件侦听器仅附加到最初的两列。一个简单的解决方案是调用 AddListeners() 每次插入新列时，如下图：

function AddListeners() {
    var thElm;
    var startOffsetX;
    var startOffsetY;

    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;
          startOffsetX = th.offsetWidth - e.pageX;
          startOffsetY = th.offsetHeight - e.pageY;
        });

        th.appendChild(grip);
      });

    document.addEventListener('mousemove',function(e) {
      if (thElm) {
        thElm.style.width = startOffsetX + e.pageX + 'px';
        thElm.style.height = startOffsetY + e.pageY + 'px';
      }
    });

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

$(document).ready(function() {
  AddListeners();

  
})

var iter = 2;

function AddColumn() {
  var myform = $('#myTable');
  myform.find('tr').each(function() {
    var trow = $(this);
    iter += 1;
    if (trow.index() === 0) {
      trow.append('<th><div style="top: 0px; right: 0px; bottom: 0px; width: 5px; position: absolute; cursor: col-resize;">&nbsp;</div>th ' + iter + '</th>');
    } else {
      trow.append('<td>th ' + iter + '</td>');
    }
  });
  AddListeners();
}

table {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  border-collapse: collapse;
}

table td {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

table th {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a onclick="AddColumn()">Add column</a>

<table id="myTable">
  <thead>
    <tr>
      <th>th 1</th>
      <th>th 2</th>
    </tr>
  </thead>
</table>

虽然这个解决方案很丑陋，因为它会重做为早期存在的列添加的侦听器。更好的解决方案是要求您将每列的事件附加过程与 AddListeners() 中的回调分离，并分别在 Array.prototype.forEach.call 和 AddColumn() 中调用它。不过这是另一个问题。