DatePicker +搜索表格中的文本框

我有一個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>

來源

2014-04-08 DaPhunk

你已經有一個ONSELECT的日期選擇器定義 - 只需更新，要改變你需要做的放在location.href或任何其他。 – Dave

@Dave我不確定在那裏寫什麼代碼。你能舉個例子嗎？ – DaPhunk

但是如果他們搜索不在表格中的日期會發生什麼？似乎搜索需要完成，然後才能確定是否找到任何結果，然後才能跳轉到頁面。 – jwatts1980

試試這個：

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

來源

2014-04-08 15:05:48 jwatts1980

我做了幾個與'：visible'選擇器相關的編輯。我想，因爲你正在切換''：'可見'應該在的'tr'。 – jwatts1980

我試過了，沒有任何效果。該文件位於第二列，如果這有所影響。 – DaPhunk

對不起。我編輯我的代碼6次，因爲我一直在選擇錯誤的地方。我認爲這個技巧將成爲'：visible'僞選擇器。我要在JSFiddle中測試這個... – jwatts1980

DatePicker +搜索表格中的文本框

回答

相關問題