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

Question

I am trying to compare a date from an input field to the ones displayed in my table. However, when matched, it hides all tds and erases the column, if I use the .parent() it hides all trs when matches so I have an empty table.

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:

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

the td I am trying to match

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

I just want to hide the one tr where it matches the td.

Thanks

---

Cannot get a jsfiddle to work but here is a screen of the console + table

The table: http://imgur.com/BWecBdn

The console when logging http://imgur.com/bMwGDpd

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

Only seems to be checking the condition of the first tr?

---

JSFiddle https://jsfiddle.net/jp3jf25a/ similar to my code, however for me the table is being affected, cannot get it to work on the fiddle

Answer 1

Working fiddle

Various issues:

• By using conditionDateFrom.html() you are hiding all of the tds, instead you should use $(this).text() .
• Filter on the trs not tds, you want to hide the rows that don't match instead of hiding individual tds
• Skip the first tr because that is the table headers
• Use <= not < because an equal date should show
• Handle when the input is blank (should show all again)

Updated code:

$('[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();
});

Answer 2

let's breakdown your problem, you want to hide only the first match i guess But instead you are fetching all the matches. $('td[name="tdDateFrom') will fetch you all matches instead of that you can get only first match by $('td[name="tdDateFrom').first() .

`$('td[name="tdDateFrom').first().parent('tr')` will return you only the one matched tr element.

here is updated fiddle https://jsfiddle.net/jp3jf25a/1/

Answer 3

I think this should work to select the appropriate tr.

var inputValue = $(input).attr('value') //'2016-01-01'
var conditionDateFrom = $("td:contains(inputValue)").parent()

http://api.jquery.com/contains-selector/

edited after realizing you want the parent tr (I think?)