javascript - 循环遍历表并添加类

Question

我有一张 table 。我正在尝试获取我的脚本，循环遍历表格，查找 td 中是否有任何内容，以及 .hide() 我的按钮(如果有)或 .show() 如果没有。

演示:Fiddle

然后单击按钮，循环遍历所有 td 并向它们添加一个类。

// <!-- Whether or not to display the button depending if there is anything in each td -->
function Example(column) {
    var rows = $("tr");
    for (var i = 0; i < rows.length; i++) {
        console.log('>><<>><<>><<>><<', column)
        if ($(rows[i]).find("td" [column]).find(".unavailable").length > 0) {
            $('.button-fill').hide();
        } else {
            $('.button-fill').show();
        }
    }
};

// <!-- Fill in the td -->
function bookAllDay() {
    $('.button-fill').click(function () {
        for (var i = 0; i < rows.length; i++) {
            $(rows[i]).find("td" [column]).addClass("active");
        }
    });
};
for (var i = 5 - 1; i >= 1; i--) {
    Example(i);
};

我在 jsfiddle 中添加了一个真正精简的表格和代码版本。因此，我从工作中绘制的示例中可能缺少一些内容，但我已经尽力了。

谢谢!

Answer 1

无需循环遍历表。您可以使用 :empty伪选择器选择所有没有内容的td。

:empty: Select all elements that have no children (including text nodes).

代码:

// Check if there are empty td's
if ($('table').find('td:empty').length) {
    // Show the button, if there is at least one empty td
    $('.button-fill').show();
} else {
    $('.button-fill').hide();
}

您还可以使用toggle来缩短代码。

$('.button-fill').toggle($('table').find('td:empty').length);