开始日期和结束日期输入字段的JQuery筛选表
问题描述:
我有一个表。该表包含行,每行中的其中一列是日期。表格上方有两个输入文本框;一个输入框表示起始日期,另一个表示迄今为止。假设用户只输入起始日期,我希望表格显示包含该日期和之后的每一行。如果用户只在TO输入字段中输入日期,则相反;它会显示日期到达该日期的所有行。以及用户是否有FROM和TO日期。它将捕获FROM日期和TO日期以及包含这两者之间的日期的每一行。开始日期和结束日期输入字段的JQuery筛选表
我到目前为止完成的是一个输入字段,它将搜索表格的整个主体并输出用户输入的任何字符的那一行。
JQuery的
HTML
<input id="searchInput" type="text" placeholder="From"/>
<input id="searchInput" type="text" placeholder="To" >
<tbody class="fbody">
<tr>
<td>something</td>
<td>something</td>
<td>4/18/2016</td>
<td>something</td>
</tr>
<tr>
<td>something</td>
<td>something</td>
<td>4/19/2016</td>
<td>something</td>
</tr>
<tr>
<td>something</td>
<td>something</td>
<td>4/20/2016</td>
<td>something</td>
</tr>
</tbody>
请帮助。谢谢。
答
当前代码的一个大问题是重复的DOM。其余的逻辑很接近,但我简化了它。
下面的代码段应该适合你。如果顶部输入的日期无效,它们将被完全忽略。请注意,由于我们正在运行input
事件,因此您暂时将过滤掉所有行,因为它将在填充至4位数字之前解释数年。您可能需要对此进行不同的解释,或者可能使用blur
事件。
$(".searchInput").on("input", function() {
var from = stringToDate($("#searchFrom").val());
var to = stringToDate($("#searchTo").val());
$(".fbody tr").each(function() {
var row = $(this);
var date = stringToDate(row.find("td").eq(2).text());
//show all rows by default
var show = true;
//if from date is valid and row date is less than from date, hide the row
if (from && date < from)
show = false;
//if to date is valid and row date is greater than to date, hide the row
if (to && date > to)
show = false;
if (show)
row.show();
else
row.hide();
});
});
//parse entered date. return NaN if invalid
function stringToDate(s) {
var ret = NaN;
var parts = s.split("/");
date = new Date(parts[2], parts[0], parts[1]);
if (!isNaN(date.getTime())) {
ret = date;
}
return ret;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="searchFrom" class="searchInput" type="text" placeholder="From"/>
<input id="searchTo" class="searchInput" type="text" placeholder="To" >
<table class="fbody" border="1">
<tr>
<td>nothing</td>
<td>nothing</td>
<td>4/18/2016</td>
<td>nothing</td>
</tr>
<tr>
<td>nothing</td>
<td>nothing</td>
<td>4/19/2016</td>
<td>nothing</td>
</tr>
<tr>
<td>nothing</td>
<td>nothing</td>
<td>4/20/2016</td>
<td>nothing</td>
</tr>
</table>
真棒!谢谢您的帮助!如果我使用模糊事件,那么如果用户在输入字段外单击,它将起作用。当日期在输入字段中输入时,您是否知道可能会填充表格的其他选项? – userlkjsflkdsvm
'输入'可能是您最好的选择,除非您需要支持IE dave