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

Question

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

预期行为：

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

Answer 1

您的代码不起作用，因为在调用回调时，事件侦听器仅附加到最初的两列$(document).ready。一个简单的解决方案是 AddListeners()每次插入新列时调用，如下所示：function AddListeners() {&nbsp; &nbsp; var thElm;&nbsp; &nbsp; var startOffsetX;&nbsp; &nbsp; var startOffsetY;&nbsp; &nbsp; Array.prototype.forEach.call(&nbsp; &nbsp; &nbsp; document.querySelectorAll("table th"),&nbsp; &nbsp; &nbsp; function(th) {&nbsp; &nbsp; &nbsp; &nbsp; th.style.position = 'relative';&nbsp; &nbsp; &nbsp; &nbsp; var grip = document.createElement('div');&nbsp; &nbsp; &nbsp; &nbsp; grip.innerHTML = "&nbsp;";&nbsp; &nbsp; &nbsp; &nbsp; grip.style.top = 0;&nbsp; &nbsp; &nbsp; &nbsp; grip.style.right = 0;&nbsp; &nbsp; &nbsp; &nbsp; grip.style.bottom = 0;&nbsp; &nbsp; &nbsp; &nbsp; grip.style.width = '5px';&nbsp; &nbsp; &nbsp; &nbsp; grip.style.position = 'absolute';&nbsp; &nbsp; &nbsp; &nbsp; grip.style.cursor = 'col-resize';&nbsp; &nbsp; &nbsp; &nbsp; grip.addEventListener('mousedown', function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; thElm = th;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; startOffsetX = th.offsetWidth - e.pageX;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; startOffsetY = th.offsetHeight - e.pageY;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; th.appendChild(grip);&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; document.addEventListener('mousemove', function(e) {&nbsp; &nbsp; &nbsp; if (thElm) {&nbsp; &nbsp; &nbsp; &nbsp; thElm.style.width = startOffsetX + e.pageX + 'px';&nbsp; &nbsp; &nbsp; &nbsp; thElm.style.height = startOffsetY + e.pageY + 'px';&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; document.addEventListener('mouseup', function() {&nbsp; &nbsp; &nbsp; thElm = undefined;&nbsp; &nbsp; });&nbsp; };$(document).ready(function() {&nbsp; AddListeners();&nbsp;&nbsp;})var iter = 2;function AddColumn() {&nbsp; var myform = $('#myTable');&nbsp; myform.find('tr').each(function() {&nbsp; &nbsp; var trow = $(this);&nbsp; &nbsp; iter += 1;&nbsp; &nbsp; if (trow.index() === 0) {&nbsp; &nbsp; &nbsp; trow.append('<th><div style="top: 0px; right: 0px; bottom: 0px; width: 5px; position: absolute; cursor: col-resize;">&nbsp;</div>th ' + iter + '</th>');&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; trow.append('<td>th ' + iter + '</td>');&nbsp; &nbsp; }&nbsp; });&nbsp; AddListeners();}table {&nbsp; border-width: 1px;&nbsp; border-style: solid;&nbsp; border-color: black;&nbsp; border-collapse: collapse;}table td {&nbsp; border-width: 1px;&nbsp; border-style: solid;&nbsp; border-color: black;}table th {&nbsp; border-width: 1px;&nbsp; border-style: solid;&nbsp; border-color: black;&nbsp; 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">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>th 1</th>&nbsp; &nbsp; &nbsp; <th>th 2</th>&nbsp; &nbsp; </tr>&nbsp; </thead></table>但这个解决方案很丑陋，因为它会重做为早期存在的列添加的侦听器。更好的解决方案需要您将每列的事件附加过程与回调中解耦AddListeners()，并分别在Array.prototype.forEach.call和 中 调用它AddColumn()。但这是另一个问题了。