我有一个DatePicker对象附加到一个文本框,该文本框按日期搜索&过滤器两列(日期,文件名[带有链接以打开实际.html文件])。这张桌子只有唯一的日期,所以当我搜索日期时,我只会得到一个结果。DatePicker +搜索表格中的文本框
我的问题是:如何使datepicker/searchbox过滤出表格,然后查看是否有结果,如果存在;然后直接打开文件,而不是让用户单击文件名来打开它。如果没有搜索日期的文件,则发出警报消息或其他内容。
下面的代码:
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="ess_style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript" src="jquery-latest.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="esstable">
<input type="text" id="searchess" placeholder="ESS Date Search" style="float:left; margin:10; vertical-align:top"></input>
<table border="1" id="table_side2">
<tbody>
<tr>
<th>Date</th>
<th>ESS File</th>
</tr>
<tr>
<td>3/17/2014 </td>
<td> <a href="./file1.html"> file 1 </a> </td>
</tr>
<tr>
<td>3/22/2014 </td>
<td> <a href="./file2.html"> file 2 </a> </td>
</tr>
</tbody>
</table>
</div>
<script>
//datepicker
$(function() {
$("#searchess").datepicker({
dateFormat: "m/dd/yy",
onSelect: function() {
$("#searchess").trigger('keyup')
}
});
});
//search textbox
$("#searchess").keyup(function() {
if(typeof String.prototype.trim !== 'function') {
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
}
}
var value = this.value.trim();
$("#esstable").find("tr").each(function(index) {
if (!index) return;
var id = $(this).find("td").first().text().trim();
$(this).toggle(id.indexOf(value) !== -1);
});
});
//script to populate table
$.getScript('index.js');
</script>
</body>
</html>
你已经有一个ONSELECT的日期选择器定义 - 只需更新,要改变你需要做的放在location.href或任何其他。 – Dave
@Dave我不确定在那里写什么代码。你能举个例子吗? – DaPhunk
但是如果他们搜索不在表格中的日期会发生什么?似乎搜索需要完成,然后才能确定是否找到任何结果,然后才能跳转到页面。 – jwatts1980