[JQUERY] html로 테이블에 실시간 검색과 필터를 수행하는 방법

html로 테이블에 실시간 검색과 필터를 수행하는 방법

해결법

1. ---

   1.나는이 예제를 만들었습니다.

   나는이 예제를 만들었습니다.

   var $rows = $('#table tr');
   $('#search').keyup(function() {
       var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
   
       $rows.show().filter(function() {
           var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
           return !~text.indexOf(val);
       }).hide();
   });
   

   데모 : http://jsfiddle.net/7BUmG/2/

   정규식을 사용하여 더 많은 고급 기능을 사용하면 행의 임의의 순서로 단어를 검색 할 수 있습니다. 당신이 사과 녹색 또는 녹색 사과를 입력하면 그것은 동일하게 작동합니다 :

   var $rows = $('#table tr');
   $('#search').keyup(function() {
   
       var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
           reg = RegExp(val, 'i'),
           text;
   
       $rows.show().filter(function() {
           text = $(this).text().replace(/\s+/g, ' ');
           return !reg.test(text);
       }).hide();
   });
   

   데모 : http://jsfiddle.net/dfsq/7BUmG/1133/

   여러 행과 열을 통해 검색과 필터링 테이블을 구현할 때 당신이 성능과 검색 속도 / 최적화를 고려하는 것이 매우 중요합니다. 단순히 당신이 모든 단일 키 입력에 검색 기능을 실행하지 않아야 말, 그것은 필요는 없습니다. 너무 자주 당신이 그것을 진동을 소거해야 실행 필터링을 방지합니다. 위 코드 예제가 될 것이다 :

   $('#search').keyup(debounce(function() {
       var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
       // etc...
   }, 300));
   

   당신은 Lodash의 _.debounce에서 예를 들어, 어떤 디 바운스 구현을 선택할 수 있습니다, 또는 당신은 내가 (여기에서 디 바운스를) 다음 데모에서 사용하는 것처럼 매우 간단한 무언가를 사용할 수 있습니다 http://jsfiddle.net/7BUmG/6230/ 및 HTTP : / /jsfiddle.net/7BUmG/6231/.

2. ---

   2.나는이에 대한 jQuery 플러그인이있다. 또한 JQuery와 - UI를 사용합니다. 여기에서 예를 볼 수 있습니다 http://jsfiddle.net/tugrulorhan/fd8KB/1/

   나는이에 대한 jQuery 플러그인이있다. 또한 JQuery와 - UI를 사용합니다. 여기에서 예를 볼 수 있습니다 http://jsfiddle.net/tugrulorhan/fd8KB/1/

   $("#searchContainer").gridSearch({
               primaryAction: "search",
               scrollDuration: 0,
               searchBarAtBottom: false,
               customScrollHeight: -35,
               visible: {
                   before: true,
                   next: true,
                   filter: true,
                   unfilter: true
               },
               textVisible: {
                   before: true,
                   next: true,
                   filter: true,
                   unfilter: true
               },
               minCount: 2
           });
   

3. ---

   3.여기에서, 테이블의 모든 (전체 TD, TR 테이블), 순수한 자바 스크립트 가능한 짧게을 덮으면서 HTML 테이블의 내부를 검색하기위한 최선의 해결책은 :

   여기에서, 테이블의 모든 (전체 TD, TR 테이블), 순수한 자바 스크립트 가능한 짧게을 덮으면서 HTML 테이블의 내부를 검색하기위한 최선의 해결책은 :

   <input id='myInput' onkeyup='searchTable()' type='text'>
   
   <table id='myTable'>
      <tr>
         <td>Apple</td>
         <td>Green</td>
      </tr>
      <tr>
         <td>Grapes</td>
         <td>Green</td>
      </tr>
      <tr>
         <td>Orange</td>
         <td>Orange</td>
      </tr>
   </table>
   
   <script>
   function searchTable() {
       var input, filter, found, table, tr, td, i, j;
       input = document.getElementById("myInput");
       filter = input.value.toUpperCase();
       table = document.getElementById("myTable");
       tr = table.getElementsByTagName("tr");
       for (i = 0; i < tr.length; i++) {
           td = tr[i].getElementsByTagName("td");
           for (j = 0; j < td.length; j++) {
               if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                   found = true;
               }
           }
           if (found) {
               tr[i].style.display = "";
               found = false;
           } else {
               tr[i].style.display = "none";
           }
       }
   }
   </script>
   

4. ---

   4.나는 dfsq의이 코멘트 매우 유용한 답을 발견했다. 나는 나에게 약간의 수정을 적용했다 (내가 여기를 게시하도록하겠습니다, 경우에 다른 사람에게 약간의 사용이다).

   나는 dfsq의이 코멘트 매우 유용한 답을 발견했다. 나는 나에게 약간의 수정을 적용했다 (내가 여기를 게시하도록하겠습니다, 경우에 다른 사람에게 약간의 사용이다).

   var에 $ 행 = $ ( '래퍼.'); VAR rowsTextArray = []; 난 VAR = 0; $ .each ($ 행 함수 () { rowsTextArray [I] = $ (이) .find ( '과일.') 텍스트 ()를 대체 (/ \ S + / g '') .toLowerCase ()..; 내가 ++; }); $ ( '# 검색').의 keyup (함수 () { VAR 브로 = $ .trim ($ (이) .val ()) ( '/ + / g) .toLowerCase ()를 교체한다.; rows.show 달러 (). 필터 (함수 (색인) { 창 (rowsTextArray [인덱스] .indexOf (발) === -1); }).숨는 장소(); }); 스팬 { 마진 오른쪽 : 0.2em; }

   <스팬 클래스 = "숫자"> 한 <스팬 클래스 = "과일"> 사과

   <스팬 클래스 = "숫자">이 <스팬 클래스 = "과일"> 바나나

   <스팬 클래스 = "숫자"> 세 <스팬 클래스 = "과일"> 체리

   <스팬 클래스 = "숫자"> 네 <스팬 클래스 = "과일"> 날짜 <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

5. ---

   5.매우 도움이 코드를 입력 @dfsq 감사합니다!

   매우 도움이 코드를 입력 @dfsq 감사합니다!

   나는 약간의 조정을했습니다 아마 어떤 다른 사람도 그들처럼. 난 당신이 엄격한 일치하지 않고, 복수의 단어를 검색 할 수있는 보장.

   예 행 :

   당신은 'AP 통신 흥'을 검색 할 수 있으며 첫 번째 행을 인식 할 것이다 당신은 '바나나 사과'를 검색 할 수 있으며 두 번째 행을 인식 할 것이다

   데모: http://jsfiddle.net/JeroenSormani/xhpkfwgd/1/

   var $rows = $('#table tr');
   $('#search').keyup(function() {
     var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase().split(' ');
   
     $rows.hide().filter(function() {
       var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
       var matchesSearch = true;
       $(val).each(function(index, value) {
         matchesSearch = (!matchesSearch) ? false : ~text.indexOf(value);
       });
       return matchesSearch;
     }).show();
   });
   

6. ---

   6.

   function search_table(){
     // Declare variables 
     var input, filter, table, tr, td, i;
     input = document.getElementById("search_field_input");
     filter = input.value.toUpperCase();
     table = document.getElementById("table_id");
     tr = table.getElementsByTagName("tr");
   
     // Loop through all table rows, and hide those who don't match the search query
     for (i = 0; i < tr.length; i++) {
       td = tr[i].getElementsByTagName("td") ; 
       for(j=0 ; j<td.length ; j++)
       {
         let tdata = td[j] ;
         if (tdata) {
           if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
             tr[i].style.display = "";
             break ; 
           } else {
             tr[i].style.display = "none";
           }
         } 
       }
     }
   }
   

7. ---

   7.이 같은 기본 자바 스크립트를 사용할 수 있습니다

   이 같은 기본 자바 스크립트를 사용할 수 있습니다