javascript - 在没有jQuery的情况下切换表列的可见性

我有一个多列HTML表，我想在其中切换给定列（在第4个下方）的可见性。我已经在jQuery中成功实现了以下步骤：

document.write('<a class="toggle" href="#!" data-alt="Hide">Show</a>.');
$(document).ready(function() {
    $('.toggle').click(function() {
        var el = $(this);
        var curr = el.text();
        el.text(el.attr("data-alt"));
        el.attr("data-alt", curr);
        $('td:nth-child(4),th:nth-child(4)').toggle();
    });
});

但是，我想用纯Javascript实现此功能，因为这是我网站上唯一使用jQuery的函数。我一直在努力使用getElementsByClassName和classList.toggle()解决方案，因为它们无法为所有td和th元素添加属性（我的HTML生成了），因此对我不起作用通过Markdown实现无法实现）。

我怀疑也许有使用document.querySelectorAll('td:nth-child(x)')的解决方案，但我还没有弄清楚。有什么想法吗？

最佳答案

是的，在JavaScript中，您可以使用document.querySelectorAll('td:nth-child(x)')语句为您的问题实施解决方案。

您还需要实现一个附加功能来切换元素的可见性。请参见下面的代码。

var toggleDisplay = function (element) {
  element.style.display = (element.style.display === 'none')?'block':'none';
};

现在，您可以调用以下语句来切换列的可见性。

document.querySelectorAll('td:nth-child(x),th:nth-child(x)').forEach(toggleDisplay);

确保将“ x”替换为您的列号。

关于javascript - 在没有jQuery的情况下切换表列的可见性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47881276/