2016-08-02 2 views
1

자바 스크립트를 사용하여 HTML 표 열에서 검색합니다. 그러나 표 셀 내용의 첫 글자 만 입력하여 값을 검색 할 수 있습니다.Jquery로 TABLE에서 단어를 부분 검색

내 데이터의 예는 다음과 같습니다. 그것이 정상적으로 같은 I가 2 열에있는 값123 검색하면

은 원하는 테이블 셀 팝업. 내가 값 456 또는 예를 들어 23를 검색 할 경우

아무 일도 발생하지 않습니다.

|column1|column2| 
__________________ 
|000|123 456| 
|001|123 456| 

나의 현재 자바 스크립트 : 그것이 경우

<script type="text/javascript"> 
     $("#searchn").on("keyup", function() { 
      var value = $(this).val(); 

      $("table tr").each(function(index) { 
       if (index !== 0) { 

        $row = $(this); 

        var id = $row.find("td").children().eq(1).text(); 

        if (id.indexOf(value) !== 0) { 
         $row.hide(); 
        } 
        else { 
         $row.show(); 
        } 
       } 
      }); 
     }); 
     </script> 

답변

0

당신의 논리는 당신이 검색하는 값이 발견되지 않는 경우 indexOf() 반환 -1으로 결함, 그리고 경기의 제로로부터 시작되는 인덱스입니다 녹이다. 이 때문에 귀하의 if 문장은 값의 시작 부분에서 일치 항목을 제외하므로 결함이 있습니다.

이 대신에 if 조건을 변경해야합니다 :

if (id.indexOf(value) !== -1) { 
    $row.hide(); 
} 
else { 
    $row.show(); 
} 

는 또한이 단축 될 수 있습니다 대신 filter()toggle()를 사용하여 : 유사한

$("#searchn").on("keyup", function() { 
 
    var value = $(this).val(); 
 

 
    $("table tr:not(:first)").show().filter(function(index) { 
 
     return $(this).find("td:eq(1)").text().indexOf(value) == -1; 
 
    }).hide(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Col 1</th> 
 
    <th>Col 2</th> 
 
    </tr> 
 
    <tr> 
 
    <td>000</td> 
 
    <td>123 456</td> 
 
    </tr> 
 
    <tr> 
 
    <td>001</td> 
 
    <td>123 456</td> 
 
    </tr> 
 
</table> 
 

 
<input id="searchn" />

+0

작품을 매력 :)! 귀하의 설명과 명확한 예를 들어 주셔서 감사합니다. – Leon

+0

문제 없으니 기꺼이 도와주세요. –