HTML 테이블 검색

Question

HTML을 사용하여 테이블을 만들고 검색 상자를 통합하려고합니다. 어떻게해야합니까? 좋은 jQuery 플러그인을 권하거나 더 완벽한 튜토리얼을 추천 할 수 있습니까?

Answer 1

테이블을 찾는 것은 간단 jQuery를 사용

$('#table1 tr td').each(function(){ 
    if (this.innerHTML.indexOf(searchKeyword) > -1) 
     this.style.color = 'yellow' //found within this td so highlight it 
}); 

Answer 2

빠르고 더러운 방법 : 이하의 (x)는 HTML을

$(document).ready(
    function(){ 
     $('#searchbox').keyup(
      function(){ 
       var searchText = $(this).val(); 
       if (searchText.length > 0){ 
        $('td:contains(' + searchText +')') 
         .css('background-color','#f00'); 
        $('td:not(:contains('+searchText+'))') 
         .css('background-color','#fff'); 
       } 
      }); 
    }); 

:

<table> 
    <thead> 
     <tr> 
      <td colspan="2"> 
       <label for="searchbox">Search:</label> 
       <input type="text" id="searchbox" /> 
      </td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Something</td> 
      <td>More text</td> 
     </tr> 
     <tr> 
      <td>Lorem ipsum</td> 
      <td>blah?</td> 
     </tr> 
    </tbody> 
</table> 

JS Fiddle demo. JQuery와 자체의 CSS를 설정하는 대신에 addClass()/removeClass()를 사용하는을 편집

---

:

$(document).ready(
    function(){ 
     $('#searchbox').keyup(
      function(){ 
       var searchText = $(this).val(); 
       if (searchText.length > 0){ 
        $('td:contains(' + searchText +')') 
         .addClass('searchResult'); 
        $('td:not(:contains('+searchText+'))') 
         .removeClass('searchResult'); 
       } 
       else if (searchText.length == 0) { 
        $('td.searchResult') 
         .removeClass('searchResult'); 
       } 
      }); 
    }); 

Demo at JS Fiddle.

jQuery를 :

---

는 다음을 사용할 수있는 검색 결과를 포함하지 않는 테이블 셀을 페이드 아웃

$(document).ready(
    function(){ 
     $('#searchbox').keyup(
      function(){ 
       var searchText = $(this).val(); 

       if (searchText.length > 0) { 
        $('tbody td:contains('+searchText+')') 
         .addClass('searchResult'); 
        $('.searchResult') 
         .not(':contains('+searchText+')') 
         .removeClass('searchResult'); 

        $('tbody td') 
         .not(':contains('+searchText+')') 
         .addClass('faded'); 
        $('.faded:contains('+searchText+')') 
         .removeClass('faded'); 
       } 
       else if (searchText.length == 0) { 
        $('.searchResult').removeClass('searchResult'); 
        $('.faded').removeClass('faded'); 
       } 
      }); 
    }); 

CSS :

td.faded { 
    opacity: 0.2; 
} 

Demo at JS Fiddle .

Answer 3

감사 데이빗 토마스

좋은 해결책. 다음은 완벽합니다.

$(document).ready(
function(){ 
    $('#searchbox').keyup(
     function(){ 
      var searchText = $(this).val(); 

      if (searchText.length > 0) { 
       $('tbody td:contains('+searchText+')') 
        .addClass('searchResult'); 
       $('.searchResult') 
        .not(':contains('+searchText+')') 
        .removeClass('searchResult'); 

       $('tbody td') 
        .not(':contains('+searchText+')') 
        .addClass('faded'); 
       $('.faded:contains('+searchText+')') 
        .removeClass('faded'); 

       $('.faded').hide(); 
       $('.searchResult').show(); 

      } 
      else if (searchText.length == 0) { 
       $('.searchResult').removeClass('searchResult'); 
       $('.faded').removeClass('faded'); 
       $('td').show(); 
      } 
     }); 
}); 

JS Fiddle demo Updated

Answer 4

은 큰 응답이 있습니다. 하지만 this 남자는 내가 정말로 원했던 것을했습니다. http://blogs.digitss.com/demo/jquery-table-search.html

출처 : 그것은 이전 답변

HTML

<label for="kwd_search">Search:</label> <input type="text" id="kwd_search" value=""/> 
<table id="my-table" border="1" style="border-collapse:collapse"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Sports</th> 
      <th>Country</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Sachin Tendulkar</td> 
      <td>Cricket</td> 
      <td>India</td> 
     </tr> 
     <tr> 
      <td>Tiger Woods</td> 
      <td>Golf</td> 
      <td>USA</td> 
     </tr> 
     <tr> 
      <td>Maria Sharapova</td> 
      <td>Tennis</td> 
      <td>Russia</td> 
     </tr> 
    </tbody> 
</table> 

자바 스크립트 (jQuery를)

// When document is ready: this gets fired before body onload <img src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> 
$(document).ready(function(){ 
    // Write on keyup event of keyword input element 
    $("#kwd_search").keyup(function(){ 
     // When value of the input is not blank 
     if($(this).val() != "") 
     { 
      // Show only matching TR, hide rest of them 
      $("#my-table tbody>tr").hide(); 
      $("#my-table td:contains-ci('" + $(this).val() + "')").parent("tr").show(); 
     } 
     else 
     { 
      // When there is no input or clean again, show everything back 
      $("#my-table tbody>tr").show(); 
     } 
    }); 
}); 
// jQuery expression for case-insensitive filter 
$.extend($.expr[":"], 
{ 
    "contains-ci": function(elem, i, match, array) 
    { 
     return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0; 
    } 
}); 

라이브 데모에서가 두드러 다르다 http://blogs.digitss.com/javascript/jquery-javascript/implementing-quick-table-search-using-jquery-filter/