在没有 jQuery 的情况下切换 table 列的可见性

Question

我有一个多列 HTML table，我想在其中切换给定列（下图第 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 和 [=16 添加属性=] 元素（我的 HTML 是由无法做到这一点的 Markdown 实现生成的）。

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

Answer 1

是的，在 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' 替换为您的列号。

Answer 2

为了帮助其他人实现并添加原始文本交换，我使用 <input> + <label> 而不是 <a>:

var message = '<input id="checkbox" type="checkbox">\
    <label for="checkbox" id="clickme" onclick="toggle()"></label>.';

document.write(message);

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

function toggle() {
    document.querySelectorAll('td:nth-child(4),th:nth-child(4)').forEach(toggleDisplay);
};

然后使用 CSS 添加文本：

#checkbox {
    display: none;
}

#checkbox:not(:checked) + #clickme:after {
    content: "Show";
}

#checkbox:checked + #clickme:after {
    content: "Hide";
}

给那只猫剥皮的方法有很多，但对我来说这似乎是最直接的。非常感谢！

在没有 jQuery 的情况下切换 table 列的可见性

Toggle visibility of table columns without jQuery

javascript

visibility

html-table

toggle