Javascript 日期选择器+；在表格中搜索文本框_Javascript_Jquery_Html_Datepicker

Javascript 日期选择器+；在表格中搜索文本框

javascript jquery html

Javascript 日期选择器+；在表格中搜索文本框,javascript,jquery,html,datepicker,Javascript,Jquery,Html,Datepicker,我有一个DatePicker对象附加到一个文本框中，该文本框按日期搜索和过滤两列（日期、文件名[带有打开实际.html文件的链接]）表。表中只填充了唯一的日期，所以当我搜索一个日期时，我只会得到一个结果我的问题是：如何让datepicker/searchbox过滤掉表格，然后看看是否有结果，如果有；然后直接打开文件，而不是让用户单击文件名打开文件。如果没有包含搜索日期的文件，则发出警告消息或其他信息代码如下： <html lang="en"> <head>

我有一个DatePicker对象附加到一个文本框中，该文本框按日期搜索和过滤两列（日期、文件名[带有打开实际.html文件的链接]）表。表中只填充了唯一的日期，所以当我搜索一个日期时，我只会得到一个结果

我的问题是：如何让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>


日期
ESS文件
3/17/2014 
3/22/2014 
//日期选择器
$（函数（）{
$（“#searchess”）.datepicker({
日期格式：“年月日”，
onSelect:function（）{
$（“#searchess”）.trigger（'keyup'）
}
});
});
//搜索文本框
$（“#searchess”）.keyup（函数（）{
if（typeof String.prototype.trim！=“函数”）{
String.prototype.trim=函数（）{
返回此。替换（/^\s+|\s+$/g，'）；
}
}
var value=this.value.trim（）；
$（“#esstable”）.find（“tr”）.each（函数（索引）{
如果（！index）返回；
var id=$（this.find（“td”）.first（）.text（）.trim（）；
$（this）.toggle（id.indexOf（value）！=-1）；
});
});
//用于填充表的脚本
$.getScript（'index.js'）；

试试这个：

//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);
    });

    //At this point the search is complete...
    //See if there is one option:
    if ($("#esstable tr:visible").length == 2) { 
        //get the url of the link
        var url = $("#esstable tr:visible td a").attr("href");

        //go to the link
        window.location.href = url;
    }
});

您已经为datepicker定义了onSelect-只需更新它即可更改location.href或其他您需要执行的操作。@Dave我不确定要在那里编写什么代码。你能给我举个例子吗？但是如果他们搜索一个不在表中的日期会发生什么？似乎需要先完成搜索，然后才能判断是否找到任何结果，然后才能跳转到页面。@jwatts1980是的，这正是我想要做的。我想先过滤出结果，然后如果它存在，直接转到文件，而不让用户单击文件名。（我要编辑OP）我对

：visible

选择器进行了一些编辑。我想既然你正在切换

tr

，那就是

：visible

应该打开的那一个。我试过了，没有任何效果。如果有区别的话，文件在第二列。对不起。我编辑了我的代码6次，因为我总是把选择器放错地方。我认为关键在于

：visible

伪选择器。我将在JSFIDLE中对此进行测试……我错过了标题行未被隐藏的部分。我将

if

更改为检查

==2

。这把小提琴的工作原理是：酷。如果有效，请确保标记为答案：）