Jquery 테이블 검색 및 행 강조 표시

Question

몇 가지 문제가 있습니다. Excel 파일에서 데이터를 가져 오는 PHP에서 만든 테이블이 있습니다. 사용자가 원하는 특정 열 (사용자 지정 열)을 검색 할 수있게하고 지정된 값이 있으면 전체 행을 강조 표시합니다.

나는 숙제를하고 있었고 꾸밈이없는 사람들을 찾을 수 있었다.

$(document).ready(function(){ 
    $("#search").click(function(){ 
     var searchText; 

     if(col == 0 || col == 1 || col ==3){ 
      searchText = $("#searchText").val() 
     } 
     else if(col == 6){ 
      searchText = $("#maxPets option:selected").text(); 
     } 
     else if(col == 7){ 
      searchText = $("#maxWeight option:selected").text(); 
     } 

     $("myTable tr td:nth-child(" + col +")").each(function() { 

      if ($(this).val.indexOf(searchText) !=-1) { 
       tr.addClass('result'); } 
      else { 
       tr.removeClass('result'); 
       } 

     }); 


    }); 
}); 

Answer 1

$(document).ready(function(){ 
    $("#search").click(function(){ 
     var searchText; 
     $("tr").removeClass("result"); 
     if (col == 0 || col == 1 || col == 3) { 
      searchText = $("#searchText").val(); 
     } 
     else if(col == 6){ 
      searchText = $("#maxPets option:selected").text(); 
     } 
     else if(col == 7){ 
      searchText = $("#maxWeight option:selected").text(); 
     } 
     $("#myTable tr").filter(function() { 
      return $("td:eq(" + col + ")", this).text() == searchText; 
     }).closest("tr").addClass("result"); 
    }); 
}); 

jsFiddle DEMO -- Updated for partial search

:

이

더 단순화 할 수있다. 드롭 다운을 가정합니다.

Answer 2

변경 :

 if ($(this).val.indexOf(searchText) !=-1) { 
      tr.addClass('result'); } 
     else { 
      tr.removeClass('result'); 
      } 

에 : 여기 내 악몽 (와 관련된 코드

 if ($(this).text().indexOf(searchText) !=-1) { 
      $(this).closest("tr").addClass('result');  } 
     else { 
      $(this).closest("tr").removeClass('result'); 
     } 

val 함수 인 jQuery를 방법이다, 그것은 문자열이 아니다 당신이 검색 할 수있는 잘못된 방법입니다. 아마도 테이블 필드의 내용은 text()-val()으로 사용자의 값으로 읽습니다. 놓다.

그리고 변수가 포함되지 않습니다. tr - 요소를 포함하는 행의 클래스를 추가/제거하고 싶습니다. 당신이에서 col를 얻고있는 곳 난 아직도 모르는

$(this).closest("tr").toggleClass("result", $(this).text().indexOf(searchText) !=-1);