Question

我有一个多列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而感到挣扎{1}}和document.querySelectorAll('td:nth-child(x)')个元素（我的HTML是由Markdown实现生成的，无法执行此操作）。

我怀疑使用Calendar calendar = Calendar.getInstance(); // from current time long curTimeInMills = new Date().getTime(); long timeInMills = curTimeInMills - 5 * (24*60*60*1000); // `enter code here`subtract like 5 days calendar.setTimeInMillis(timeInMills); System.out.println(calendar.getTime()); // from specific time like (08 05 2015) calendar.set(Calendar.DAY_OF_MONTH, 8); calendar.set(Calendar.MONTH, (5-1)); calendar.set(Calendar.YEAR, 2015); timeInMills = calendar.getTimeInMillis() - 5 * (24*60*60*1000); calendar.setTimeInMillis(timeInMills); System.out.println(calendar.getTime());可能有一个解决方案，但我还没有弄明白。有什么想法吗？

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

如果它可以帮助其他人，实施Vivek's solution above并添加原始文本交换，我使用<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的情况下切换表列的可见性

2 个答案: