javascript - jQuery 隐藏所有 trs 或 tds 而不仅仅是一个

Question

我正在尝试将输入字段中的日期与表格中显示的日期进行比较。但是，当匹配时，它会隐藏所有 td 并删除该列，如果我使用 .parent() ，它会在匹配时隐藏所有 tr，所以我有一个空表。

jQuery:

$('[name="dateFrom"]').on("change", function () {
    var dateFrom = new Date($(this).val());
    var conditionDateFrom = $('td[name="tdDateFrom');
    conditionDateFrom.hide();
    conditionDateFrom.filter(function () {
        return dateFrom < new Date(conditionDateFrom.html());
    }).show();

});

输入:

<input name="dateFrom" type="date" value="2016-01-01" />

我要匹配的td

<td name="tdDateFrom">{{ a.StartDate | date:'longDate'}}</td>

我只想隐藏与 td 匹配的一个 tr。

谢谢

<小时/>

无法让 jsfiddle 工作，但这里是控制台 + 表格的屏幕

表:/image/C7VzP.jpg

登录时的控制台/image/FcKnb.jpg

        var test = new Date(conditionDateFrom.html());
        console.log(test);

似乎只检查第一个 tr 的条件？

<小时/>

JSFiddle https://jsfiddle.net/jp3jf25a/类似于我的代码，但是对我来说，表格受到了影响，无法让它在 fiddle 上工作

Answer 1

Working fiddle

各种问题:

• 通过使用 conditionDateFrom.html()您隐藏了所有 tds，而应该使用 $(this).text() .
• 过滤 trs 而不是 tds，您想要隐藏不匹配的行而不是隐藏单个 tds
• 跳过第一个 tr，因为那是表格标题
• 使用<=不是<因为应该显示相同的日期
• 当输入为空时进行处理(应再次显示全部)

更新的代码:

$('[name="dateFrom"]').on("change", function () {
    var conditionDateFrom = $('.table tr');

    if($(this).val() == ''){
        conditionDateFrom.show();
        return;
    }

    var dateFrom = new Date($(this).val());

    conditionDateFrom.hide();
    conditionDateFrom.filter(function (index) {
        return index == 0 || dateFrom <= new Date($(this).children('td[name="tdDateFrom"]').text());
    }).show();
});