Question

我有两张桌子：一排桌子站在多列桌子上方。我想通过单击位于此列正上方的单行表中的单元格来删除多列表中的列。

我正在尝试使用此代码执行此操作：

$('.del-column').delegate('td', 'click', function() {
    var index = this.cellIndex;
    $(this).closest('.my-table').find('tr').each(function() {
        this.removeChild(this.cells[ index ]);
    });
});

其中.my-table是一个多列表，而.del-column是一列表。任何想法为什么它不起作用？

Here is a demo我试图这样做。 here is图片中有一个解释。

Answer 1

首先，不推荐使用Col Position TE2ASHEMA 7。您需要改为使用delegate()。

要修复您的实际问题，您需要修复您使用的DOM遍历逻辑，因为on()不是单击的单元格的父级，而是父级.my-table的兄弟级别的子级。您还可以使用div选择器来获取列中的:nth-child()元素而无需循环。试试这个

td

Working example

另请注意，HTML的格式过于复杂。通过使用单个表可以更简单地实现它。它也有助于布局保持一致。

Answer 2

$(this).closest('.my-table')无效，因为.my-table不是.del-column的祖先。试试如下。

$('.del-column').on('click', 'td', function() {
    var index = this.cellIndex;

    $('.my-table').find('tr').each(function() {
        this.removeChild(this.cells[ index ]);
    });
    $(this).remove();
});

<强> UPDATED FIDDLE

Answer 3

您可以像这样循环遍历它们并查看索引是否匹配。

var upperTable = document.querySelector(".del-column");
var lowerRows = document.querySelectorAll(".my-table tr")

function removeCorresponding(event) {
  upperIndex = event.target.cellIndex;
  lowerRows.forEach(function(row) {
    row.querySelectorAll("td").forEach(function(lowerCell, lowerIndex) {
      if (upperIndex === lowerIndex) {
        lowerCell.remove();
        event.target.remove()
      }
    });
  });
}

upperTable.querySelectorAll("td").forEach(function(cell, upperIndex) {
  cell.addEventListener("click", removeCorresponding);
});

https://jsfiddle.net/rt9oju8b/1/

通过单击另一个表

3 个答案: