我正在尝试将输入字段中的日期与表格中显示的日期进行比较。但是,当匹配时,它会隐藏所有 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/FcKnb.jpg
var test = new Date(conditionDateFrom.html());
console.log(test);
似乎只检查第一个 tr 的条件?
<小时/>JSFiddle https://jsfiddle.net/jp3jf25a/类似于我的代码,但是对我来说,表格受到了影响,无法让它在 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();
});
关于javascript - jQuery 隐藏所有 trs 或 tds 而不仅仅是一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36640517/