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

Question

我试图建立一个交互式表格网格，当你调整边缘的大小时，其他表格也会被调整大小。到目前为止，所有的事情似乎都很顺利，直到要添加一个新的列，您必须单击按钮。

预期行为：

如果您尝试拖动最初两列的边缘，它们将完美地工作。但是，如果通过单击按钮添加新列，则会将该列添加到表中，但与其他两个列的行为不匹配。如何让所有列都添加一个按钮来遵循相同的行为？

​

$(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>

​

Answer 1

您的代码无法工作，因为事件侦听器只在调用$(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()中调用它。不过，这是另一个问题。