Question

我有一个DatePicker对象附加到一个搜索＆amp;按日期过滤两列（日期，文件名[带有打开实际.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>

Answer 1

试试这个：

//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 +搜索表格中的文本框

1 个答案: